активируется более 1 HttpPost - PullRequest
0 голосов
/ 04 июня 2018

Я создаю страницу, на которой я бы хотел, чтобы в зависимости от того, что было сделано, я мог выполнять несколько разных действий.

например, у меня есть раскрывающийся список, в котором я хочу, чтобы различные формы загружались на страницу в зависимости от выбора в раскрывающемся списке.

В настоящее время я делаю это следующим образом:

$(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>

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Ну, у меня есть решение, я не очень доволен им, но оно работает.

это то, что я сделал с момента публикации моего вопроса: я изменил по запросу Стивена Мюке эту часть здесь:

<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 и Index (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"))
0 голосов
/ 04 июня 2018

Проблема в том, что ваш ввод с type = "submit" отправляет форму.Это стандартное поведение для HTML-форм.Измените тип ввода на type = "button":

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

Затем измените событие в jQuery на "click":

$(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...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...