Load partial view into div tag on same page

Question

I know this question might be repeated. But my issue is, I want my partial view display after button click on same page into div tag. When I click on button partial view is getting display but not on same page in div tag but it is getting open on different page. this is my code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    MDLNoDDLIndex
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>

    <script type="text/javascript">
        //script for binding drop down list value from view to model
        function TestFun() 
        {
            var mdlno = $("#ddlMDLNo").val();
            var txtmdlno = document.getElementById("Request_For_Id");
            txtmdlno.value = mdlno;
            //alert(txtmdlno.value);
        }

        //script for loading partial view into div tag "viewlist"
        $(function () {
            $('form').submit(function () {
                if ($(this).valid()) {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        beforeSend: function () {
                            $("#viewlist").hide();
                        },
                        complete: function () {
                            $("#viewlist").show();
                        },
                        success: function (result) {
                            $("#viewlist").html(result);
                        }
                    });
                }
                return false;
            });
        });

</script>
<div>
<h2>Search by MDLNo</h2>

    <% using (Html.BeginForm("MDLNoDataList", "Search", FormMethod.Post, new { id = "form1" }))
    { %>

         <%: Html.ValidationSummary(true, "Profile Updation was unsuccessful. Please correct the errors and try again.") %>

          Select MDLno 

            <%= Html.DropDownList("ddlMDLNo", ViewData["MDLno"] as SelectList, "--Select One--", new { onchange = "TestFun()" })%> 
            <%: Html.HiddenFor(model => model.Request_For_Id) %>

            <input type="submit" value="search" name="SearchMDLNo" id="btnclick" />    
            <div id="viewlist"></div> // partial view should be loaded here.
    <% } %> 

</div>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

So you are loading partial view on ajax success callback right ? — Karthik Chintala
– Karthik Chintala, Commented Feb 14, 2013 at 6:55

Karthik Chintala · Accepted Answer · 2013-02-14 07:03:53Z

5

Try like this:

$("#btnclick").click(function(){
    $("#viewlist").load("your url here");
});

Hope it helps

answered Feb 14, 2013 at 7:03

Karthik Chintala

5,5455 gold badges33 silver badges61 bronze badges

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

Comments

Chintana Meegamarachchi · Accepted Answer · 2013-02-14 06:49:14Z

2

Html.BeginForm does a full page post back.

Please consider using Ajax.BeginForm. Ajax.BeginForm accepts a parameter by the type of AjaxOptions which has a property called OnSuccess.

You can provide a javascript function to OnSuccess to get the results and display it in a div

answered Feb 14, 2013 at 6:49

Chintana Meegamarachchi

1,8201 gold badge12 silver badges11 bronze badges

Comments

Rik Leigh · Accepted Answer · 2013-02-13 10:39:25Z

1

At the moment, the form is still being submitted and posted back to the server which is why your partial loads in a new page.

You need to preventDefault() at the top of your submit event handler to stop the post from occuring.

So...

$('form').submit(function (e) {

            //prevent form post
            e.preventDefault();

            // ajax stuff here

answered Feb 13, 2013 at 10:39

Rik Leigh

1,3281 gold badge7 silver badges7 bronze badges

Collectives™ on Stack Overflow

Load partial view into div tag on same page

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related