CODEWITHSUNDEEP
jqueryasp.net-mvcpartial-views
IT_INFOhUb
IT_INFOhUb

Reputation: 516

Load partial view into div tag on same page

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>

Upvotes: 2

Views: 10108

Answers (3)

Karthik Chintala
Karthik Chintala

Reputation: 5545

Try like this:

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

Hope it helps

Upvotes: 5

Chintana Meegamarachchi
Chintana Meegamarachchi

Reputation: 1820

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

Upvotes: 2

Rik Leigh
Rik Leigh

Reputation: 1328

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

Upvotes: 1

Related Questions