MVC AJAX – с чего начать

Для начала нам нужны скрипты:

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

 Для того чтобы это все заработало нам нужна Ajax форма:

@using (Ajax.BeginForm("ActionName", new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "ajaxDiv",
}))
{           
<div id="ajaxDiv">
@{Html.RenderPartial("~/Views/News/Control.cshtml", new Model.TestModel(true));}
</div>
}

Немного подробнее. Я использую имя действия – которое мне возвращает сформированный Partial View. В AjaxOption я указываю HttpMetod, InsertionMode – это способ вставки, можно заменить, добавить в начало, и в конец блока, UpdateTargetId – это имя контейнера в котором должны быть отображены данные. В самом теле формы нужно разместить контрол который будет вызывать submit формы. В моем случае я перегружаю полностью весь контрол, методами вызванными из самого контрола, по этому я его и разместил в форме.
Можно сделать и так:

 

@using (Ajax.BeginForm("GetData", new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "ajaxDiv",
}))
{           
<input type="submit" value="Загрузить" />
}
<div id="ajaxDiv">
@{Html.RenderPartial("~/Views/News/Control.cshtml", new Model.TestModel(true));}
</div>

 В контроллере для Ajax у меня есть Action:

[HttpPost]
public ActionResult GetData()
{
Model.TestModel model = new Model.TestModel();
return PartialView ("~/Views/News/Control.cshtml", model);
}

В моем случае он возвращает Partial View который и записывается в div – "ajaxDiv"

 

А что делать если нужно передавать параметры? Для этого нужно указать их в параметре routeValues:

@Ajax.ActionLink(, "MonuthChange", 
new { Param1 = Model.Param1, Param2 = Model.Param2 }, new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "calendar"
}, new { @class = "active" })

 А в контроллере:

public ActionResult GetData(string Param1, int Param2)
{
Model.TestModel model = new Model.TestModel();
return PartialView ("~/Views/News/Control.cshtml", model);
}

 Интересный момент, чтобы контролы могли отправить Ajax форму или запрос, нужно использовать котролы не из @Html а из @Ajax.

Add comment