обновление данных о событии изменения выпадающего в Ajaxian пути в MVC

Question

Сценарий

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

Я могу сделать это с обратной передачей, я попытался использовать Ajax.Beginform (), но это все еще делаю пост обратно.

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

    <%using (Ajax.BeginForm("UpdatePanel", new AjaxOptions { UpdateTargetId = "divDetails" }))
          {%>
        <%=Html.DropDownList("Dinner", (SelectList)ViewData["Dinner"], new { onchange = "this.form.submit();" })%>
        <div id="divDetails">
            <fieldset>
                <legend>Details</legend>
                <% if (Model != null)
                   {%>
                <p>
                    ID:
                    <%= Html.Encode(Model.ID)%>
                </p>
                <p>
                    Title:
                    <%= Html.Encode(Model.Title)%>
                </p>
                 <%} %>
            </fieldset>
            <%} %>

Любая помощь приветствуется.

Answer 1

Я считаю, что ваша проблема с BeginForm заключается в том, что MVC всегда выполняет постбэк на всю страницу - по крайней мере, по моему опыту. Если вы хотите «частичную» обратную передачу, вам нужно использовать javascript и веб-сервисы.

Я делаю именно это, используя GeoIP. Вот как выглядит моя страница:

<p>
<label for="country">Country</label>
<%= Html.DropDownList("country", new SelectList(Model.Countries, "CountryId", "Name", Model.DefaultCountry.CountryId))%>
<%= Html.ValidationMessage("country")%>
</p>

<p>
<label for="subdivision">Subregion</label>
<%= Html.DropDownList("subdivision", new SelectList(Model.Subdivisions, "SubdivisionId", "Name", Model.DefaultSubdivision.SubdivisionId)) %>
<%= Html.ValidationMessage("subdivision")%>
</p>

<script type="text/javascript">

    $('#country').change(function() {

        $('#subdivision').children().remove();

        var countryId = $("#country > option:selected").val();

        Sys.Net.WebServiceProxy.invoke   
            (   
                '/WebServices/Regions.asmx',
                "GetSubdivisions",   
                false,
                { countryId: countryId },
                addressControl_bindOptionResults   
            );
    });

    function addressControl_bindOptionResults(data)   
    {   
        for (var x = 0; x < data.length; x++) {
            $("#subdivision").append($('<option></option>').val(data[x].Id).html(data[x].Name));  
        }   
    }

</script>

Мой веб-сервис выглядит следующим образом. При добавлении нового веб-сервиса обязательно раскомментируйте атрибут над объявлением класса:

[System.Web.Script.Services.ScriptService]

Имейте в виду, ваш возвращаемый объект должен быть сериализуемым.

[WebMethod]
        public Subdivision[] GetSubdivisions(int countryId)
        {
            if (this.repository == null)
            {
                Resolve();
            }

            List<Subdivision> subdivisions = new List<Subdivision>(repository.GetActiveSubdivisionsDto(countryId));

            return subdivisions.ToArray();
        }

Не обращайте внимания на некоторые внутренние аспекты работы моего веб-сервиса. Я использую Unity, Nfluent и NHibernate для своего уровня данных, но основы те же. Вызовите базу данных, верните свои объекты и верните список сериализуемых объектов передачи данных (у меня это просто имя и идентификатор).

Answer 2

Рассматривали ли вы использование jQuery? Я использую jQuery.post для моего решения. Вот пример, который работает для меня:

jQuery(document).ready(function() {

  // Dropdown or select list
  jQuery('#countryListBox').change(function(){ populateCityListBox(); });

  function populateCityListBox()
  {
    //Get ID for selected country
    var ctryID = jQuery("select#countryListBox").val();

    jQuery.post("inclyde/jquery_get_data.php", { instance: 'getCitiesByCountry', countryID: ctryID },
      function(data)
      {
          //Process data and store it in var newContent.
          // Then bind data to the div you wish to present the content
          jQuery("div.myNewText").html(newContent);

      }, "json");
  }
});

Мне было трудно заставить работать .NET Ajax. После того, как я открыл для себя jQuery, все стало очень мило :)

Answer 3

Старая тема, но у меня возникла такая же проблема, и я наконец понял:

Изменение:

onchange = "this.form.submit();" 

до:

onchange = "$(this.form).submit();" 

Answer 4

Проблема в onchange = "this.form.submit ();". Когда вы отправляете форму с помощью form.submit (), Ajax - Scripts of MS не включаются. Проверьте, поместив

<input type="submit" value="submit" /> 

в форме удаления формы.submit (). Запрос в контроллере будет тогда Request.IsAjaxRequest = true.

Я понятия не имею, как можно избавиться от кнопки отправки приятным способом - я сделал ее невидимой и нажал на нее посредством обмена через Javascript.

Это был мой первый выстрел в ajax в MVC. Тогда я использовал jquery и был счастлив.