CODEWITHSUNDEEP
jqueryajaxasp.net-mvc-5
new-learner
new-learner

Reputation: 73

Ajax call return whole page instead of replacing a div tag

I am learning Ajax with MVC 5, it return whole partial view instead of replacing div tag? I don't know why

Here is the page where form submit

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

<h3>INSERT</h3>
<div> 
 @using (Ajax.BeginForm("NewInsert","Home", new AjaxOptions  
 {  
   HttpMethod = "GET",  
   InsertionMode = InsertionMode.Replace,  
   UpdateTargetId = "formSection"  
 }))  
 {  
   <input type="text" name="textToInsert" />  
   <input type="submit" value="Insert It" />
 }
</div>
<div id="formSection">Hello</div>

Here is the LayoutPage with script

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.4.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

Here is the partial view

<h3>@ViewBag.TheText</h3>

Here is the controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;

namespace Northwind.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome()
        {
            ViewBag.Message = "New page yeah";
            return View();
        }

        public ActionResult TestBeginForm()
        {
            return View();
        }
        public PartialViewResult InsertText(string text)
        {
            ViewBag.TextToDisplay = text;
            return PartialView();
        }
        public ActionResult GetText(string q)
        {
            ViewBag.TheText = q;
            return PartialView();
        }


        public ActionResult NewInsert(string textToInsert)
        {
            ViewBag.TheText = textToInsert;
            return PartialView("_NewInsert");
        }

        [HttpPost]
        public ActionResult PostInsert(string p)
        {
            ViewBag.TheText = p;
            return PartialView();
        }  
    }
}

And ClientValidationEnabled and UnobtrusiveJavaScriptEnabled are true in webconfig

Upvotes: 2

Views: 1660

Answers (1)

Shyju
Shyju

Reputation: 218722

You are missing one javascript library which does the Asynchronous form posting for you. Add that to your page (Layout) and your asynchronous form posting should work fine.

<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.1.4.js"></script>

    <!--this is the new one to add-->
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
</head>

Upvotes: 1

Related Questions