c# - 返回部分 View 并将其附加到 index.cshtml View Mvc4 中的 div

Question

我正在尝试做类似的事情，我有一个索引 View ，当单击时，每个 View 上都有一些标签我想返回一个局部 View 并将其附加到主 index.cshtml View 中的 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>

Controller contactWeb 函数调用日志

 [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 共享 View ，然后显示登录屏幕，当我单击 callLogs 时，它不显示任何内容。我错过了什么

Answer 1

你的做法不对:

您正在编写 jquery 事件，您必须向操作发送 ajax 调用并返回 CallLogs 的部分 View ，然后将其附加到容器 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");
        }    
    });
});