CODEWITHSUNDEEP
jqueryasp.net-mvc
Debasish
Debasish

Reputation: 1

Adding a partial View using @Html.Partial("viewname") to the body of div using Jquery in MVC

Below is the Html and Jquery code. When i am trying to add the partial view using $(".divclass").html(@Html.partial("...."); it navigates directly to the partial view instead of loading in the bootstrap modal div. While debugging i saw the above mentioned line is giving error saying "Illegal character" but the partial view content is coming properly. Can anybody help on this?

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            alert("javascript working fine");
            $("#createnew").on("click", function (e) {
                e.preventDefault(); //Prevents the default behaviour of element
                alert($(this).attr('href'));
                $(".modal-title").text("Create New");
                $(".modalbody").html(@Html.Partial("~/Views/Shared/_PartialViewTest.cshtml"));
                $("#myModal").modal('show');
            })
        })
    </script>
}

Html:

<!--partialview-->
<h2>
    This is a partial view
</h2>


<div class="container">
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modalbody">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 1610

Answers (1)

Ram P
Ram P

Reputation: 21

why you are adding partial View using $(".divclass").html(@Html.partial("....");

You can simply add one div having class .divclass and load that Partial View using Jquery Ajax.

I will give you sample code below.

//Inside Your View Use Below Div.

<div class="divclass ">

</div>

//You can load your Partial View by Using another Action in following way

public ActionResult Dashboard()
{
return PartialView("PartialView");
}

//Use below Script inside

    <script type="text/javascript">
     $(function () {
      $.ajax({
                async: true,
                type: "POST",
                url: url,
                url : "/Controller/Action",
                contentType: 'application/json; charset=utf-8',
                dataType: 'html',
                success: function (data) {
                    $(".divclass ").html(data);


                },
                failuere: function () { alert("fail"); }
            });
});
        </script>

Upvotes: 1

Related Questions