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

Question

我正在尝试做一些事情，比如，我有一个索引视图，当单击时，每个视图上都有一些标记。我想返回一个局部视图，并将其附加到main index.cshtml视图中的div我的代码i低于

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> 

共享视图_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>

控制器联系人Web功能调用日志

 [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>

Answer 3

试试这个：

$("#callLogs").on("click", function () {
    $.ajax({
        url: '@Url.Action("callLogs", "YourController")',
            type: 'get',
            datatype: 'json',
            success: function (data) {
                $('div#container_inner_frame').html(data);
            }
        });
});