返回局部视图并将其附加到index.cshtml视图Mvc4中的div

Question

我正在尝试做类似的事情,我有一个索引视图,其中每个上面都有一些标签,当我点击我想要返回一个局部视图并将其附加到主index.cshtml中的div查看我的代码我在下面

Index.cshtml

@model OyeAPI.Models.User
@{
    object user = Session["userId"];
    ViewBag.Title = "Index";
}


<link href="@Url.Content("~/Content/css/style.css")" rel="stylesheet"/>

<div class="main_Container">


        @if (Session["userId"] == null) { 
            <div class="login_div">
             @Html.Partial("~/Views/Shared/_signin.cshtml")
            </div>
        }else
        {
            <div style="height:100px;">
                <p>OyePortal</p>
            </div>

           // <p>@Html.ActionLink("clickme", "callLogs", "contactWeb")</p>


            <div style="position:relative; left:400px;">
                <div>


                    <p id="contacts">Contacts</p> | <p id="callLogs">Call Logs</p> | 
                    <p id="messages">Phone Messages</p> | <p >Groups</p>


                </div>
                <div id="container_inner_frame">

                    <h1>Welcome fuck it  <a href="#" id="addTest">clickme</a>   </h1>





                </div>

            </div>
        }

</div>


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
@*<script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>*@4

<script type="text/javascript">

    $("#contacts").on("click", function () {


        $("#container_inner_frame").html('@Html.Partial("~/Views/Shared/_contacts.cshtml")');

         });

    $("#callLogs").on("click", function () {


        $("#container_inner_frame").html('@Html.Partial("~/Views/Shared/_callLogs.cshtml")');



        });

    $("#messages").on("click", function () {

        $("#container_inner_frame").html('@Html.Partial("~/Views/Shared/_Phonemessages.cshtml")');

       });

</script> 

共享View _callLogs.cshtml

@model OyeAPI.Models.CallLogs
@{
    List<Model.CallLogsModel> ListCallLogs = (List<Model.CallLogsModel>)ViewData["Data"];
    Int64 CallID = 0;
    string callNumber = null;
    string callDuration = null;
    string callType = null;
    string date = null;
    string daytime = null;

}

<div class="main_Container">
    <div>
        <div>
                <ul>
                    <li>Contact ID</li><li>Contact Name </li><li>Contact Number</li>
                </ul>

        </div>

        @if (ListCallLogs != null) 
        {

            foreach (var item in ListCallLogs) 
            {

                CallID = item.CallId;
                callNumber = item.PhoneNumber;
                callDuration = item.CallDuration;
                callType = item.CallType;
                date = item.CallDate.ToShortDateString();
                daytime = item.CallDayTime.ToShortTimeString();

                <div>

                    <ul>
                        <li>@CallID</li><li>@callNumber </li><li>@callDuration</li><li>@callType</li><li>@date </li><li>@daytime</li>
                    </ul>

                </div>

            }
        }
        else
        {
            <p>Empty String list no messages</p>
        }


    </div>

</div>

控制器contactWeb函数callLogs

 [HttpPost]
         [AllowAnonymous]
        public ActionResult callLogs()
        {
            Int64 userID = Convert.ToInt64(Session["userId"]);
            try 
            {
                List<CallLogsModel> callModel = new List<CallLogsModel>();
                ICallLogs callLogObject = new CallLogsBLO();
                callModel = callLogObject.GetCallLogs(userID);

                ViewData["Data"] = callModel;


            }
            catch (Exception e)
            {

            }

            return PartialView("_callLogs", ViewData["Data"]);

        }

但它不起作用,当我在登录前运行代码时它首先点击_callLogs共享视图,然后它显示登录屏幕,当我点击callLogs它不显示任何东西.我错过了什么

Answer 1

你的方法不对:

你正在编写jquery事件,你必须向一个动作发送一个ajax调用并返回CallLogs的部分视图,然后将它附加到容器div.

这样做:

 $("#callLogs").on("click", function () {
    $("#container_inner_frame").load('@Url.Action("callLogs","YOurController")');
 });

或者像这样:

$("#callLogs").on("click", function () {
    $.ajax({
        url: '@Url.Action("callLogs", "YourControllerName")',
        success: function (response) {               
             $("#container_inner_frame").html(response);
        }
        error: function () {
             alert("error occured");
        }    
    });
});

Answer 2

如果你使用jQuery不引人注目的Ajax库,你应该可以做一些简单的事情来从按钮/链接点击的部分加载内容.请注意,您需要一个返回PartialViewResult的控制器(这可以引用您的视图):

@Ajax.ActionLink("Click Me", "Action", "Controller", new AjaxOptions{ InsertionMode=InsertionMode.InsertAfter, UpdateTargetId="MyTargetDivId"})

<div id="MyTargetDivId"></div>