Question

我有一个带有两个partialViews（parPage1和ParPage2）的剃刀页面（index.cshtml）此外，我在每个偏见视图上都有按钮。

当我点击partialView上的button1时，应该回复ajax并点击cooreponding操作结果并从控制器加载来自ViewBag.Message1的消息的部分视图。

所以，当我点击我的partialView1上的button1时，它应该回发并重新加载，并显示“在partialView1上点击Button1”的消息。

问题

当我点击按钮时，它正在对控制器进行ajax回发，但它没有从ViewBag中选择要在重新加载的PartialView页面上显示的消息。为什么它不从viewbag中拾取数据。当我调试时，我可以看到ViewBag在剃刀页面上重新加载之前获取实际消息。但它没有显示在视图上。请帮我解决这个问题。

发布到控制器后，我实际需要检查db中是否已存在已发布的数据，如果数据已存在，我想将消息发送回partialView。

以下是我的ParPage1.cshtml

@using (Ajax.BeginForm("ParPage1", "Home", new { id = 1 }, new AjaxOptions { UpdateTargetId = "Page1Form" }, new { encType = "multipart/form-data" }))
    {
<div>
<p>This is partial view page1</p>

    <input type="button" title="" value="Button1" id="btnButton1"/>
    <p>@ViewBag.Message1</p>
    </div>

}
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnButton1").click(function (e) {
            var data = { "Data1":"BCXDEFX", "Data2": "BCDEF" };
            $.ajax({
                type: "POST",
                url: "/Home/Button1Clicked",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                dataType: "json",
                success: saveItemCompleted(data),
                error: saveItemFailed()

            });

        });

        function saveItemCompleted(data) {
        }

        function saveItemFailed(request, status, error) {
        }

    });

</script>

以下是我的ParPage2

@using (Ajax.BeginForm("ParPage2", "Home", new { id = 1 }, new AjaxOptions { UpdateTargetId = "Page2Form" }, new { encType = "multipart/form-data" }))
    {
<div>
<p>This is partial view page2</p>
    <input type="button" title="" value="Button2" id="btnButton2"/>

    <p>@ViewBag.Message2</p>
    </div>

  }
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnButton2").click(function (e) {
            var data = { "Data1": "BCXDEFX", "Data2": "BCDEF" };
            $.ajax({
                type: "POST",
                url: "/Home/Button2Clicked",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                dataType: "json",
                success: saveItemCompleted(data),
                error: saveItemFailed()

            });

        });

        function saveItemCompleted(data) {
        }

        function saveItemFailed(request, status, error) {
        }

    });

</script>

这是我的控制器代码

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

namespace MvcApplication4.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {

            return View();
        }

        public ViewResult ParPage1()
        {
            return View();
        }
        public ViewResult ParPage2()
        {
            return View();
        }
        public ActionResult Button1Clicked()
        {
            ViewBag.Message1 = "Button1Clicked";
            return PartialView("ParPage1");
        }
        public ActionResult Button2Clicked(myData data)
        {
             //Validate for duplicate data
               if(duplicate)
                  {
            ViewBag.Message2 = "This data already exists in table. Please review";
                 }
                 else
                    {SaveRecord();}
            return PartialView("ParPage2");
        }

    }
}

Answer 1

也许尝试这样的事情（如果错误会出现，你应该知道我技术上没有在MVC4和Jquery中编写任何应用程序：p）

public ActionResult Button1Clicked()
{
        //ViewBag.Message1 = "Button1Clicked";
        //return PartialView("ParPage1");
        return "Button1Clicked"; // return just simple message
}


" <p>@ViewBag.Message1</p> "
change to: <p id="message">not clicked yet</p>



function saveItemCompleted(data) {
       $("#message").text(data);
}

您不需要下载所有局部视图，只需要一个简单的字符串。

MVC4 Jquery Ajax发回部分视图并从控制器获取ViewBag数据

1 个答案: