Как вызвать частичный вид через AJAX в MVC3

Question

Я разрабатываю приложение в MVC3 Мне нужно, чтобы показать вид partail на щелчке раскрывающегося списка За то, что я написал Аякс,

$("#UserName").change(function() { 
     var userid = $("#UserName").val(); 
     var ProvincialStateID = $("#State").val(); 
     var Hobbyid = $("#Hobby").val(); 
     var Districtid = $("#DistrictNames").val(); 
     var Homeid = $("#Hobbyhome_EstablishmentId").val(); 
     var urlperson = '@Url.Action("FetchPersonByUserName")'; 
     $.ajax({ 
      type: "POST", 
      url: urlperson, 
      data: { userid: userid, stateid: ProvincialStateID, hobbyid: Hobbyid, districtid: Districtid, homeid: Homeid }, 
      success: function (data) { 
      } 
     }); 
    }); 

и я написал функцию в контроллере, как:

[HttpPost] 
    public ActionResult FetchPersonByUserName(int userid,int stateid,int districtid,int homeid,int Hobbyid) 
    { 
     //Code to fetch data using all the parameters 
     return PartialView("_LearnerAssociationGridPartial", list); 
    } 

Отсюда идет в частичном виде там я также можно увидеть данные
Но пока он приходит в веб-интерфейсе я не могу видеть данные.
Пожалуйста, помогите мне, возможно, мой аякс может быть неправильным, пожалуйста, скажите мне, где я ошибаюсь.

это мой Главный вид:

@model HobbyHomesWebApp.ViewModel.LearnerAssociationViewModel 
@{ 
    Layout = "~/Views/Shared/_LayoutPostLogin.cshtml"; 
} 

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post)) 
{ 
    @Html.ValidationSummary(true) 
    <table> 
     <div> 
      @{Html.RenderPartial("_LearnerAssociationWebPartial", Model.learner);} 
     </div> 
    </table> 
    <table> 
     <div id="result"> 
      @{Html.RenderPartial("_LearnerAssociationGridPartial", Model.LearnerList);} 
     </div> 
    </table> 
} 

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

Моя первая точка зрения:

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post)) 
{ 
    <table> 
    <tr> 
     <td> 
      @Html.Label(@Resources.selectusername) 
     </td> 
     <td>:</td> 
     <td> 
     <div class="editor-field"> 
      @Html.DropDownListFor(model => model.Loginaccount.LoginAccountID, new SelectList(ViewBag.UserName, "LoginAccount.LoginAccountID", "FirstName"), "--Select UserName--", new { @id = "UserName" }) 
     </div> 
     </td> 
    </tr> 
      </table> 

}

Answer 1

Edit: ОК, так что если я правильно понимаю, ваш взгляд должен выглядеть следующим образом:

@model HobbyHomesWebApp.ViewModel.LearnerAssociationViewModel 
@{ 
    Layout = "~/Views/Shared/_LayoutPostLogin.cshtml"; 
} 

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post)) 
{ 
    @Html.ValidationSummary(true) 
    <table> 
     <tr> 
     <td> 
      <div> 
       @{Html.RenderPartial("_LearnerAssociationWebPartial", Model.learner);} 
      </div> 
     </td> 
     </tr> 
    </table> 
    <table> 
     <tr> 
     <td> 
      <div id="result"> 

      </div> 
     </td> 
     </tr> 
    </table> 
} 

Это означает, что, когда вы сначала загрузите страницу, ничего не отображается во втором div.

Затем вы хотите загрузить частичный вид в div на основе выбранного значения. Во-первых, добавьте javascript, чтобы вызвать действие, которое вы уже описали.

$('#NameOfYourDropDownList').change(function() { 
    var userid = $('#NameOfYourDropDownList').val(); 
    var ProvincialStateID = $("#State").val(); 
    var Hobbyid = $('#Hobby').val(); 
    var Districtid = $('#DistrictNames').val(); 
    var Homeid = $('#Hobbyhome_EstablishmentId').val(); 
    var urlperson = "@Url.Action('FetchPersonByUserName')"; 
    $.ajax({ 
     type: 'POST', 
     url: urlperson, 
     data: { userid: userid, stateid: ProvincialStateID, hobbyid: Hobbyid, districtid: Districtid, homeid: Homeid }, 
     success: function (data) { 
      $('#result').html(data); 
     } 
    }); 
}); 

ActionResult вернет HTML. В вашей функции успеха вы назначаете это HTML-код div.

Answer 2

Я надеюсь, что я понял, что ты хотел (не снимать меня, если я не сделал)

Давайте предположим на минуту, что у вас есть тег

<div id="Returned-Content-Container"> 
</div> 

Я сделаю 2 предложения (выберите то, что вам нравится)

Razor двигатель, MVC стиль:

При создании формы с кодом:

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post)) 

Заменить FormMethod.Post с

@using (Html.BeginForm("LearnerAssociation", "Registration", 
     new AjaxOptions() 
          { 
           HttpMethod = "POST", 
           UpdateTargetId = "Returned-Content-Container", 
           InsertionMode = InsertionMode.Replace 
          }) 
     { 
       // Your form fields go here 
     } 

Что это делает по возвращению данных, которые он заменяет определенный тег с данными, возвращенных из вызова Ajax. Автоматически.

Этот способ - сделать это с помощью бритвенного двигателя.

Если вы хотите сделать это Jquery способом просто сделать следующее:

$("#UserName").change(function() { 
    var userid = $("#UserName").val(); 
    var ProvincialStateID = $("#State").val(); 
    var Hobbyid = $("#Hobby").val(); 
    var Districtid = $("#DistrictNames").val(); 
    var Homeid = $("#Hobbyhome_EstablishmentId").val(); 
    var urlperson = '@Url.Action("FetchPersonByUserName")'; 
    $.ajax({ 
     type: "POST", 
     url: urlperson, 
     data: { userid: userid, stateid: ProvincialStateID, hobbyid: Hobbyid, districtid: Districtid, homeid: Homeid }, 
     success: function (data) { 
      // This places all data returned into the defined DOM element 
      $('#Returned-Content-Container').html(data); 
     } 
    }); 
}); 

Надеется, что это помогает,

Удачи!