加载各种部分视图并将参数传递给控制器​​中的方法

时间:2016-06-16 01:59:33

标签: jquery asp.net-mvc-4 c#-4.0

我有一个页面下面有按钮和一个div页面内容来托管我的部分视图

        div id="ProjID">
            <div id="pjls">
                <label for="SelectProjID">Project:</label>

            </div>
        </div>

        <button class="links" data-url='@Url.Action("link1method","Home")'>Link1</button>
        <button class="links" data-url='@Url.Action("link2method","Home")'>Link2</button>
        <button class="links" data-url='@Url.Action("link3method","Home")'>Link3</button>


        <div id="pageContent"></div>

我有这个jquery,用于加载部分视图及其内容

        $('.links').on('click', function (e) {
                e.preventDefault();

                var $pageContent = $('#pageContent');
                    url = $(this).data('url');

                    $.get(url, function (data) {
                        $pageContent.replaceWith(data);               
                    });

            })

以下是我的控制器方法的样子

            public ActionResult link1method(string sample)
            {

                return PartialView("_Partial1");
            }

            public ActionResult link2method(string sample)
            {

                return PartialView("_Partial2");
            }

            public ActionResult link3method(string sample)
            {

                return PartialView("_Partial3");
            }

单击“链接”按钮时,只会加载Link1 部分观点别人不行。当你点击按钮2和3时没有任何反应。 我究竟做错了什么?我还想将参数传递给每个控制器方法。

2 个答案:

答案 0 :(得分:1)

如果首先单击“Link1”,则使用方法返回的部分替换<div id="pageContent"></div>,以便该元素不再存在。如果您再点击“Link2”,var $pageContent = $('#pageContent');会返回undefined,因此无需更新。

$.get()代码更改为

$.get(url, function (data) {
    $pageContent.html(data); // replaces the inner contents of the element   
})

旁注:您的控制器方法有一个参数string sample,但您永远不会将该值传递给该方法。您需要使用

$.get(url, { sample: "someValue" }, function (data) {

答案 1 :(得分:0)

在get函数中,您需要传递参数数据。一种方法是,如果您在查询字符串中的url末尾有数据。另一种方法是在JSON对象中传递参数info,如下所示:

var jsonObject = { sample : 'parameter value to send'  };

$.get(url, jsonObject, function (data) {
    $pageContent.replaceWith(data); 
});