Ajax请求获取部分视图

I have my main view like this:

我的主要观点如下：

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

<％@ Page Title =“”Language =“C＃”MasterPageFile =“〜/ Views / Shared / Site.Master”Inherits =“System.Web.Mvc.ViewPage”％>

Index

指数

<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" }

) %>

）％>

and controller like this:

和控制器这样：

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);
    }
}

}

}

and partial views like this :

和部分视图这样：

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

<％@ Control Language =“C＃”Inherits =“System.Web.Mvc.ViewUserControl”％>

Foo: Bar:

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

<％@ Control Language =“C＃”Inherits =“System.Web.Mvc.ViewUserControl”％>

Foo: Bar:

I am always getting values set by controller actions. I want to set values in view and pass to partial view. How can I do this ?

我总是通过控制器操作设置值。我想在视图中设置值并传递给局部视图。我怎样才能做到这一点 ？

2 个解决方案

#1

Assuming you have a view model

假设你有一个视图模型

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

and a controller:

和一个控制器：

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);
    }

}

a corresponding partial view:

相应的局部视图：

<%@ 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>

and finally in your main view you could have a link:

最后在主视图中你可以有一个链接：

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

which could be AJAXified:

这可能是AJAXified：

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

Now of course if the id parameter is known only with javascript you could do this:

现在，如果只有javascript知道id参数，你可以这样做：

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

and then:

接着：

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

---

UPDATE:

更新：

And for the second link:

而对于第二个链接：

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

and then:

接着：

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

#2

What seems to be the problem?

什么似乎是问题？

Pattern with both links should be (if you use jQuery):

两个链接的模式应该是（如果你使用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
});

If both links work the same, then you could change selector in line reference 1 to include both links in it. But if they work with a different container, you could add container selector as a custom attribute to the link and still use just single functionality. Change the code accordingly.

如果两个链接的工作方式相同，则可以更改行引用1中的选择器以包含其中的两个链接。但是，如果它们使用不同的容器，您可以将容器选择器添加为链接的自定义属性，并且仍然只使用单个功能。相应地更改代码。

You could place links on your main view using the usual

您可以使用常规方法在主视图上放置链接

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

so they will have correct URL that you can use as per code above. Use controller action that returns the partial view you need to display on the client.

所以他们会有正确的URL，您可以按照上面的代码使用。使用控制器操作返回需要在客户端上显示的局部视图。