Ajax-запрос для получения частичного представления

Question

Мой главный вид выглядит так:

<% @ Page Title = "" Language = "C #" MasterPageFile = "~ / Views / Shared / Site.Master" Inherits = "System.Web.Mvc.ViewPage"%>

Индекс

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>

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

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

<h2>
    Index</h2>

<script type="text/javascript">
    $(function() {
        $('#mylink').click(function() {
            $('#resultpartial1').load(this.href);
            return false;
        });
    });

    $(function() {
        $('#mysecondlink').click(function() {
            $('#resultpartial1').load(this.href, { id: 123 });
            return false;
        });
    });
</script>

<%= Html.ActionLink("click me","Partial1","Foo",new MyViewModel { Foo = "123" , Bar="456" },new { id = "mylink" }) %>
<%= Html.ActionLink("click me second link","Partial2", "Foo", new { id = "123" }, new { id = "mysecondlink" }

)%>

и контроллер, как это:

public class FooController : Controller
{
    //
    // GET: /Foo/

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Partial1(string id)
    {
        // TODO: use the id to fetch the model from somewhere
        MyViewModel model = new MyViewModel { Bar = "a", Foo = "1" };
        return View(model);
    }

    public ActionResult Partial2(string id)
    {
        // TODO: use the id to fetch the model from somewhere
        MyViewModel model = new MyViewModel { Bar = "b", Foo = "2" };
        return View(model);
    }
}

}

и частичные виды, подобные этому:

<% @ Control Language = "C #" Inherits = "System.Web.Mvc.ViewUserControl"%>

Foo: Бар:

<% @ Control Language = "C #" Inherits = "System.Web.Mvc.ViewUserControl"%>

Foo: Бар:

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

Answer 1

Предполагается, что у вас есть модель вида

public class MyViewModel
{
    public string Foo { get; set; }
    public string Bar { get; set; }
}

и контроллер:

public class FooController: Controller
{
    public ActionResult Partial1(string id)
    {
        // TODO: use the id to fetch the model from somewhere
        MyViewModel model = ...
        return View(model);
    }

    public ActionResult Partial2(string id)
    {
        // TODO: use the id to fetch the model from somewhere
        SomeOtherViewModel model = ...
        return View(model);
    }

}

соответствующий частичный вид:

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" 
%>
<div>Foo: <%= Html.DisplayFor(x => x.Foo) %></div>
<div>Bar: <%= Html.DisplayFor(x => x.Bar) %></div>

и, наконец, ваш главныйдля просмотра у вас может быть ссылка:

<%= Html.ActionLink(
    "click me", 
    "Partial1", 
    "Foo", 
    new { id = "123" }, 
    new { id = "mylink" }
) %>
<div id="resultpartial1" />

, которая может быть AJAXified:

$(function() {
    $('#mylink').click(function() {
        $('#resultpartial1').load(this.href);
        return false;
    });
});

Теперь, конечно, если параметр id известен только через javascript, вы можете сделать это:

<%= Html.ActionLink(
    "click me", 
    "Partial1", 
    "Foo", 
    null, 
    new { id = "mylink" }
) %>

, а затем:

$(function() {
    $('#mylink').click(function() {
        $('#resultpartial1').load(this.href, { id: 123 });
        return false;
    });
});

---

ОБНОВЛЕНИЕ:

А для второй ссылки:

<%= Html.ActionLink(
    "click me second link", 
    "Partial2", 
    "Foo", 
    new { id = "123" }, 
    new { id = "mysecondlink" }
) %>
<div id="resultpartial2" />

, а затем:

$(function() {
    $('#mysecondlink').click(function() {
        $('#resultpartial2').load(this.href, { id: 123 });
        return false;
    });
});

Answer 2

В чем проблема?

Шаблон с обеими ссылками должен быть (если вы используете jQuery):

$(function(){
    // attach link clicking functionality to call controller action via Ajax
    $("#LinkID").click(function(evt) { // reference 1 below
        evt.preventDefault();
        $.ajax({
            type: "GET",
            url: $(this).attr("href"), // if link has the correct URL
            success: function(data) {
                $("#containerID").append(data);
            },
            error: function(xhr, status, err) {
                // Handle error ie. alert()
            }
        });
    });

    // add code for the second link
});

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

Вы можете разместить ссылки на главном экране, используя обычный

<%= Html.ActionLink("Link text", "action", "controller", null, new { id = "LinkID" }) %>

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