返回的局部视图，并追加到index.cshtml视图Mvc4一个div [英] Return a partial view and append it to a div in index.cshtml view Mvc4

问题描述

我试图做这样的事情，我有这对每个在一个一些标记索引视图时，点击我要回的局部视图，并追加到主index.cshtml鉴于DIV
我的code I低于

I am trying to do something like, i have an index view which has some tags on each on one when click i want to return a partial view and append it to the div in main index.cshtml view my code i below

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>

控制器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"]);

        }

但它不工作，当我之前运行code登录它先打_callLogs共享视图之后，它显示登录界面，当我点击callLogs忽略了最低显示任何东西。我在我失去了一些东西。

But its not working, when i run the code before login it hit the _callLogs shared view first and after that it show the login screen and when i click the callLogs it dosen't display any thing. i my be missing something

推荐答案

您的做法是不正确的：

你写jQuery的事件，你有一个Ajax调用发送到操作，并返回的局部视图的 CallLogs ，然后将其追加到容器div。

you are writing jquery event, you have to send an ajax call to an action and return partial view of CallLogs and then append it to container 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");
        }    
    });
});

这篇关于返回的局部视图，并追加到index.cshtml视图Mvc4一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！