Return a partial view and append it to a div in index.cshtml view Mvc4

Question

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> 

shared 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 function 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"]);

        }

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

Answer 1

Your approach is not right:

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.

do like this:

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

or like this:

$("#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

Try this :

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

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

});

Answer 3

If you use the jQuery unobtrusive Ajax library, you should be able to do something as simple as this to load content from a partial on a button/link click. Note that you need to have a controller which returns a PartialViewResult (this can then reference your view) :

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

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