Ajax.BeginForm局部视图替换整个页面

时间:2014-05-08 10:07:27

标签: c# asp.net-mvc asp.net-ajax asp.net-mvc-5

我在我的MVC应用程序中遇到了一些问题,当我使用按钮(提交)时一切正常但是如果我使用onchange,在同一个窗口中打开的局部视图没有替换任何div,我使用所有方法我看到这里,但没有任何帮助,这里所有代码(任何不能正常工作)。 为什么会发生?

控制器:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        List<string> Year = new List<string>();
        Year.Add("1");
        Year.Add("2");
        Year.Add("3");
        Year.Add("4");
        ViewBag.Years = new SelectList(Year);
        return View();
    }
 public PartialViewResult testt()
    {
        return PartialView();
    }
    [HttpPost]
public PartialViewResult testTwo()
        {
            return PartialView();
        }
}

查看(我在我的页面上包含所有脚本不显眼的ajax,microsoft ajax,jquery等等):

<script src="~/Scripts/respond.min.js"></script>
<script src="~/Scripts/_references.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/MicrosoftAjax.debug.js"></script>
<script src="~/Scripts/MicrosoftAjax.js"></script>
<script src="~/Scripts/MicrosoftMvcAjax.js"></script>
<script src="~/Scripts/MicrosoftMvcValidation.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/respond.js"></script>
@using (Ajax.BeginForm("testt", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "testDiv", InsertionMode = InsertionMode.Replace }))

{
<div>
    <div >
       @Html.DropDownList("UnitsNames", (SelectList)ViewBag.Years, new { onchange = "$(this.form).onsubmit()" })
    </div>
    <div >
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "$(this.form).submit()" })
    </div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "this.form.submit()" })
    </div>
    <div>
               @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "this.form.onsubmit()" })
    </div>
</div>
}

@using (Ajax.BeginForm("testTwo", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "testDiv", InsertionMode = InsertionMode.Replace }))

{
<div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "$(this.form).onsubmit()" })
    </div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "$(this.form).submit()" })
    </div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "this.form.submit()" })
    </div>
    <div>
        @Html.DropDownList("Years", (SelectList)ViewBag.Years, new { onchange = "this.form.onsubmit()" })
    </div>
</div>
}

<br>
<div id="testDiv">
    <h4>here i need a partial view</h4>
</div>

谢谢!

4 个答案:

答案 0 :(得分:1)

你必须包括

@section scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

这在你的页面中,否则它不会起作用。试试这样,而不是脚本标签。

答案 1 :(得分:0)

在你的第二个Ajax表单中,方法是POST,但是你没有使用HttpPost属性定义任何Action方法

 @using (Ajax.BeginForm("testt", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "testDiv", InsertionMode = InsertionMode.Replace }))

像下面一样添加HttpPost

[HttpPost]
public PartialViewResult testt()
    {
        return PartialView();
    }

答案 2 :(得分:0)

我有同样的问题。我正在使用Visual Studio 2015,所以我只是简单地更新了所有NuGet包,代码开始按预期工作。

希望这有帮助。

答案 3 :(得分:0)

我有同样的问题。我注意到如果脚本包含在不同的页面中,则脚本不起作用。

在_layout页面中添加脚本

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>

并从不需要的地方删除。