When I submit the partial view by either keeping the textbox filled/empty, in both cases full view is loading. How can I call Ajax to post it?

问题

I have Area in MVC3 as mentioned below.

Model

public class AdminModule
{
    [Display(Name = "MyName")]
    [Required(ErrorMessage = "MyName is missing")]
    public String MyName { get; set; }
}

I have Partial View with following code.

@model _1.Areas.Admin.Models.AdminModule
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "myForm" }))
{
    @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" />
}

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">
    @Html.Partial("_PartialPage1", Model)
</div>

Layout

<!DOCTYPE html>

<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

Controller Actions

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

Confusion

When I submit first time.

I get output like below

and form show like this. Question is - Why is index word coming two times?

When I click second time, form appearance remains same and output shows like below.

Question - Why is Jquery coming so many times ?

回答1:

You could use an Ajax.BeginForm instead of a regular form. But first you should decide which section of your page you want to be updated after the AJAX call.

Let's suppose the following scenario: if the AJAX call is successful you want to update some section of your DOM with some result and if the AJAX fails you want to update the form and display the error message instead.

To implement this you could start by placing the form inside a partial (_MyForm.cshtml):

@model _1.Models.HomeModels
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "myForm" }))
{
    @Html.LabelFor(i => i.MyName)
    @Html.TextBoxFor(i => i.MyName)
    @Html.ValidationMessageFor(i => i.MyName)
    <input type="submit" value="Click here" id="btn" />
}

@if (Model.SomeResultProperty != null)
{
    <div>@Model.SomeResultProperty</div>
}

and then you could have your main view reference this partial:

@model _1.Models.HomeModels
<div id="myForm">
    @Html.Partial("_MyForm", Model)
</div>

The next step is to update your controller action that will handle the AJAX call:

[HttpPost]
public ActionResult Index(HomeModels model)
{
    if (ModelState.IsValid)
    {
        // validation succeeded => we could set the result property
        // on the model to be displayed:
        model.SomeResultProperty = "this is the result";
    }
    return PartialView("_MyForm", model);
}

and finally you need to include the jquery.unobtrusive-ajax.js script to your page in order for the Ajax.BeginForm helper to work:

<script type="text/javascript" src="@Url.Content("~/scripts/jquery.unobtrusive-ajax.js")"></script>

回答2:

Use Ajax.BeginForm instead.

Did you reference validation scripts in your page?

来源：https://stackoverflow.com/questions/14691895/when-i-submit-the-partial-view-by-either-keeping-the-textbox-filled-empty-in-bo

标签

asp.net-mvc

asp.net-mvc-3

asp.net-mvc-2

razor