Question

我正在创建一个页面，我希望能够根据正在进行的操作发生多种不同的操作。

例如，我有一个下拉列表，我希望根据下拉列表中的选择将不同的表单加载到页面中。

目前我这样做：

$(document).ready(function () {
      $('#subject').on("change", function (e) {
          e.preventDefault();
          var selectedVal = $('#subject').val();
          $.ajax({
              url: "ContactUs/GetForm",
              type: "POST",
              data: { searchValue: selectedVal },
              async: true,
              success: function (data) {
                  $('#renderForms').empty();
                  $('#renderForms').append(data);                  
              },
              error: function (xhr, ajaxOptions, thrownError) {
                  alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText);
              }
          });
      }; etc...

这点击下面的方法没问题

[HttpPost]
public ActionResult GetForm(string searchValue)
{
//my code here
    return PartialView("_Bills",contactModel.contactBillsModel);
}

然而，当我点击它时，也会触及以下方法，这不是我的意图。

[HttpPost]
public ActionResult Index(Contact_Portal.Models.ContactViewModel contactModel)
{
     return View(contactModel);
}

如何防止此行为？

最后一个HttpPost我在这个部分页面的按钮中使用

<input id="Send" type="submit" value="Send" class="btn btn-default" />

修改根据要求添加附加信息。

带下拉列表的视图

@model WebPortal.Models.FormViewModel

@{
    ViewBag.Title = "multiple forms";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>multiple forms</h2>

<label>My selection is...  </label>
@Html.DropDownListFor(model => model.contactSelectListItems, new List<SelectListItem>
    {
                        new SelectListItem() {Text = "option 1", Value="option 1"},
                        new SelectListItem() {Text = "option 2", Value="option 2"},
                        new SelectListItem() {Text = "option 3", Value="option 3"},
                         new SelectListItem() {Text = "option 4", Value="option 4"}
    }, "--choose--", new { id = "subject", @class="dropdown-item"})
<div id="renderForms">

</div>

表格中的一个观点：

@model WebPortal.Models.AformViewModel


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>A Form</h4>
        <hr />
        <div id="InfoBox" class="form-group col-md-20">
            Remember to fill out this text with relevant text.
        </div>
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="container">
            <div class="row">
                <div class="form-group form-group-sm col-sm-6">
                    <div class="row">
                        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-sm-9">
                            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                <div class="form-group form-group-sm col-sm-6">
                    <div class="row">
                        @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-sm-9">
                            @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
<div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <div class="col-sm-9">
                        <!--@Html.Action("Index", "ContactUs")-->
                        <input id="Send" type="submit" value="Send" class="btn btn-default" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

嗯，我有一个解决方案，你我不是很满意，但它有效。

这是我发布问题后所做的事情：我已经根据Stephen Muecke的要求改变了这一部分：

<div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <div class="col-sm-9">
                        <!--@Html.Action("Index", "ContactUs")-->
                        <input id="Send" type="submit" value="Send" class="btn btn-default" />
                    </div>
                </div>
            </div>

到

 <div class="form-group form-group-sm col-sm-6">
                    <div class="row">
                        <div class="col-sm-9">
                            <input id="Send" type="submit" value="Send" class="btn btn-default" />
                        </div>
                    </div>
                </div>

之后它通过激活我的HttpPost动作GetForm和索引（viewmodel）来解决了我的问题

但是我遇到了提交按钮激活GetForm操作而不是Index（viewmodel）操作的新问题。因此，我将提交按钮更改为以下

 <input id="Send" type="submit" value="Send" formaction=@Url.Action("Index","ContactUs") class="btn btn-default" />

此更改现在解决了我的问题，但我觉得现在输入提交按钮现在不符合不显眼的事件处理背后的想法。

修改

而不是上面的提交按钮行，我将其添加到html表单：

@using (Html.BeginForm("Index", "ContactUs"))

Answer 2

问题是你的输入类型=＆＃34;提交＆＃34;正在提交表格。这是HTML表单的标准行为。将输入的类型更改为键入=＆＃34;按钮＆＃34;：

<input id="Send" type="button" value="Send" class="btn btn-default" />

然后将jQuery中的事件更改为＆＃34;单击＆＃34;：

$(document).ready(function () {
  $('#subject').on("click", function (e) {
      e.preventDefault();
      var selectedVal = $('#subject').val();
      $.ajax({
          url: "ContactUs/GetForm",
          type: "POST",
          data: { searchValue: selectedVal },
          async: true,
          success: function (data) {
              $('#renderForms').empty();
              $('#renderForms').append(data);                  
          },
          error: function (xhr, ajaxOptions, thrownError) {
              alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText);
          }
      });
  }; etc...

超过1个HttpPost正在激活

2 个答案: