Facing issue while rendering the Partial view using JQuery

Question

I have an Area like below.

enter image description here

Below are the Controller actions.

[HttpGet]
public ActionResult Index_partial()
{
    return PartialView("_PartialPage1");
}

[HttpGet]
public ActionResult Index()
{
    AdminModule model = new AdminModule();
    model.MyName = "My Name";
    return View("Index", model);
}

View

@model _1.Areas.Admin.Models.AdminModule
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutPage1.cshtml";
}
<h2>
    Index</h2>
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript">
</script>
<script type="text/javascript" src="/scripts/jquery.unobtrusive-ajax.js">
</script>
<div id="myForm">
    @using (Html.BeginForm())
    {
        <p id="pid">
        </p>
        <input onclick="ClickHere();" type="submit" value="Button" />
    }
    <script language="javascript" type="text/javascript">
        function ClickHere() {
        debugger;
            var url = '@Url.Action("Index_partial", "Admin")';
            $('#p').load("@Url.Action("Index_partial", "Admin")");
        }

    </script>
</div>

===================================

Partial View

@model _1.Areas.Admin.Models.AdminModule
@using (Ajax.BeginForm("Index", "Admin", 
             new AjaxOptions { UpdateTargetId = "myForm", HttpMethod = "Post" }))
{
    @Html.LabelFor(i => i.MyName)
    @Html.TextBoxFor(i => i.MyName)
    @Html.ValidationMessageFor(i => i.MyName)
    <p id="getDateTimeString">
    </p>
    <input type="submit" value="Click here" id="btn" />
}

=====================================

In the View, I have a button, on clicking it should render the Partial View in

<p id="pid"></p>

Issue is - on clicking the button is navigating the page to Partial View, It should instead render the Partial View Html in p tag. How to do this ?

at the first glance i guess you need to cancel the submit event but returning false in your javascript function — 360Airwalk
– 360Airwalk, Commented Feb 6, 2013 at 14:07
@SMC: You can answer your own question instead of modifying an existing answer. :) — Leniel Maccaferri
– Leniel Maccaferri, Commented Feb 6, 2013 at 14:30

Dave Alperovich · Accepted Answer · 2014-10-08 22:45:33Z

2

Remove the @using (Html.BeginForm())
Add an id to your button

:

< input onclick="ClickHere();" type="submit" id="Button" value="Button" />

reassign your click event to unobtrusive rather than in-line:

:

$('#Button').click(function(){
       debugger;
            var url = '@Url.Action("Index_partial", "Admin")';
            $('#p').load("@Url.Action("Index_partial", "Admin")");
        }

change your return partial

:

return PartialView("_PartialPage1");

edited Oct 8, 2014 at 22:45

answered Feb 6, 2013 at 14:05

Dave Alperovich

32.6k8 gold badges82 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leniel Maccaferri · Accepted Answer · 2013-02-06 14:47:35Z

1

Remove @using (Html.BeginForm()) and add this bit of HTML:

<p id="pid"></p>

<button type="button" id="mybtn">Load partial view</button>

and then, add a bit o jQuery:

(function() {
    $('#mybtn').click(function() {
        $.ajax({
            url: '@Url.Action("Index_partial", "Admin")',
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#pid').empty().html(result);
            }
        });
    });
});

edited Feb 6, 2013 at 14:47

answered Feb 6, 2013 at 14:05

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

4 Comments

SMC Over a year ago

This is not impacting my code public PartialViewResult Index_partial()

SMC Over a year ago

This is nore required @using (Html.BeginForm()).

Leniel Maccaferri Over a year ago

Sure... you can remove that.

SMC Over a year ago

Finally i should remove the script and button from <div id="myForm">

lopezbertoni · Accepted Answer · 2013-02-06 14:09:00Z

0

Controller:

[HttpGet]
public ActionResult Index_partial()
{
    return PartialView("_PartialPage1");
}

Inside the view/javascript.

<script language="javascript" type="text/javascript">
    function ClickHere() {
        $.ajax({
        url: "@Url.Action(MVC.Admin.Index_partial())",
        async: false,
        data: { },
        success: function(data) {
            $("#pid").empty();
            $("#pid").html(data);
        }
    });
    }
</script>

I use T4MVC to generate the url.

Hope this helps.

answered Feb 6, 2013 at 14:09

lopezbertoni

3,6413 gold badges41 silver badges54 bronze badges

Comments

UnitStack · Accepted Answer · 2013-02-06 14:27:40Z

0

Home Controller:

[HttpGet]
public ActionResult PartialView()
{
   return this.PartialView("PartialView");
}

View

<script type="text/javascript">

    $(document).ready(function () {

        $("#btnSubmit").click(function() {

            $("#renderedHtml").load('Home/PartialView');

        });

    });

</script>


    <div id="renderedHtml"></div>
    <input type="submit" value="Get Partial" id="btnSubmit" />

answered Feb 6, 2013 at 14:27

UnitStack

1,1851 gold badge11 silver badges29 bronze badges

Comments

SMC · Accepted Answer · 2013-02-06 14:34:48Z

0

View should be like this...

<div id="myForm">
    <p id="pid">
    </p>
</div>
<input id="BTN" type="submit" value="Button" />
<script language="javascript" type="text/javascript">
    $('#BTN').click(function(){
        $('#pid').load("@Url.Action("Index_partial", "Admin")");
    });
</script>

answered Feb 6, 2013 at 14:34

SMC

2371 gold badge6 silver badges29 bronze badges

Collectives™ on Stack Overflow

Facing issue while rendering the Partial view using JQuery

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related