jquery - 从cshtml中通过JQuery调用Controller中的Action并返回一个值

Question

我有一个 cshtml 页面，包含 3 个文本框和 3 个下拉菜单。

我的想法是让用户对第一个问题下拉列表(是/否)做出决定，并根据这个答案，填充第二个文本框，并启用第二个下拉列表(是/否)，以及相同的过程对于第三个文本框。

我现在有以下内容:-

<script type="text/javascript">
$(document).ready(function () {

    //disable the textboxes 
    $("#T_FirstQuestion").attr('disabled', true);
    $("#T_SecondQuestion").attr('disabled', true);
    $("#T_ThirdQuestion").attr('disabled', true);

    //and the dropdowns intially
    $("#SecondQuestYesNo").attr('disabled', true);
    $("#ThirdQuestYesNo").attr('disabled', true);

    $("#FirstQuestYesNo").change(function () {
        val = $("#FirstQuestYesNo").val();
        PostValue(val);

    });

    function PostValue(val) {
        var url = "/Home/DecisionFirstQuest";
        $("#T_SecondQuestion").attr('enabled', true);
        $.ajax({
            type: "POST",
            url: url,
            data: { value: val }
        }).done(function (msg) {
            alert("Data Saved: " + msg);
        });
    }


});

</script>

@using (Html.BeginForm("Decision", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

{
<table>
    <tr>
        <td> <font face="Arial" size="2"><b>1</b></font>
        </td>
        <td>
           @Html.TextBox("T_FirstQuestion", ViewData["T_FirstQuestion"], new { @class = "NormalTextBox" })
        </td>
        <td>
           @Html.DropDownList("FirstQuestYesNo", ViewData["FirstQuestYesNoData"] as SelectList, new { @class = "normalDropdowns" })
        </td>
    </tr>
    <tr>
        <td> <font face="Arial" size="2"><b>1</b></font>
        </td>
        <td>
           @Html.TextBox("T_SecondQuestion", ViewData["T_SecondQuestion"], new { @class = "NormalTextBox" })
        </td>
        <td>
           @Html.DropDownList("SecondQuestYesNo", ViewData["SecondQuestYesNoData"] as SelectList, new { @class = "normalDropdowns" })
        </td>
    </tr>
    <tr>
        <td> <font face="Arial" size="2"><b>1</b></font>
        </td>
        <td>
           @Html.TextBox("T_ThirdQuestion", ViewData["T_ThirdQuestion"], new { @class = "NormalTextBox" })
        </td>
        <td>
           @Html.DropDownList("ThirdQuestYesNo", ViewData["ThirdQuestYesNoData"] as SelectList, new { @class = "normalDropdowns" })
        </td>
    </tr>
</table>
}

我的 Controller 如下:-

        public ActionResult DecisionFirstQuest(string value)
    {
        string strMessage = "";

        if (value == "Yes")
        {
            strMessage = "You have chosen YES!";
        }
        else
        {
            strMessage = "You have chosen NO!";
        }

        ViewData["T_SecondQuestion"] = strMessage;

        return RedirectToAction("Decision");
    }

    public ActionResult DecisionSecondQuest(string value)
    {
        string strMessage = "";

        if (value == "Yes")
        {
            strMessage = "You have chosen YES!";
        }
        else
        {
            strMessage = "You have chosen NO!";
        }

        ViewData["T_ThirdQuestion"] = strMessage;

        return RedirectToAction("Decision");
    }

    public ActionResult Decision()
    {

        string FirstQuestYesNo = HttpContext.Request["FirstQuestYesNo"];

        ViewData["T_FirstQuestion"] = "First Question Text";

        var ddlYesNoData = new SelectList(new[]
                                      {
                                          new {ID="",Name="Please Select"},
                                          new {ID="Yes",Name="Yes"},
                                          new{ID="No",Name="No"},
                                      },
                        "ID", "Name", 1);

        if (!String.IsNullOrEmpty(FirstQuestYesNo))
            ViewData["FirstQuestYesNoData"] = FirstQuestYesNo;
        else
            ViewData["FirstQuestYesNoData"] = "Yes";

        ViewData["FirstQuestYesNoData"] = ddlYesNoData;
        ViewData["SecondQuestYesNoData"] = ddlYesNoData;
        ViewData["ThirdQuestYesNoData"] = ddlYesNoData;



        return View();
    }

我正在设法获取第一个下拉列表的值，并重定向到决策操作，但是我没有填写第二个问题文本框。另外，我还遇到了一个带有一些 HTML 代码的弹出窗口，我想避免这种情况。

所以基本上我的问题是，如何填写第二个文本框，并在用户选择(是/否)后，然后填写第三个文本框。

此外，我是否使用了正确的方法，或者是否有更好的方法使用 MVC 来执行此操作？

感谢您的帮助和时间!

-------------------更新---------------------------------------- -----------------我决定采用更简单的示例

<script type="text/javascript">
$(document).ready(function () {

    $("#YesNo").change(function () {
        val = $("#YesNo").val();
        var url = "../Home/Decision";
        $.post(url, { value: val});

    });



});

</script>

@using (Html.BeginForm("Decision", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id="Decision" }))
{

@Html.DropDownList("YesNo", new List<SelectListItem>
                     {
                        new SelectListItem{ Text="Select", Value = "" }, 
                        new SelectListItem{ Text="Yes", Value = "Yes" },
                        new SelectListItem{ Text="No", Value = "No" }
                     })

string FirstQuestText = ViewBag.FirstQuestData;

 @Html.TextBox("T_FirstQuestion", FirstQuestText, new { @class = "NormalTextBox" })   
}

Controller 操作:-

        [HttpPost]
    public ActionResult Decision(string value)
    {
        string strMessage = "";
        if (value == "Yes")
        {
            strMessage = "This is the Second Yes Question";
        }
        else
        {
            strMessage = "This is the Second No Question";
        }

        ViewBag.FirstQuestData = strMessage;
        return View();
    }

现在的问题是我正确填充了 ViewBag.FirstQuestData，但它没有显示在 @Html.TextBox 中

--------------------------------JSON更新---------- ----------------------------cshtml

        $("#YesNoQuest1").change(function () {
        alert('change');
        val = $("#YesNoQuest1").val();
        var url = "../Home/Decisions1";
        $.getJSON(url, function(data) {
             alert(data.message);
        });

Controller

        [HttpPost]
    public JsonResult Decisions1(string value)
    {
        string strMessage = "";
        if (value == "Yes")
        {
            strMessage = "This is the Second Yes Question";
        }
        else
        {
            strMessage = "This is the Second No Question";
        }

        return Json(new { message = strMessage }, JsonRequestBehavior.AllowGet);
    }

Answer 1

尝试返回基于字符串的数据，而不是重定向到操作，如下所示:

[HttpPost]
public ActionResult Decision(string value)
{
    string strMessage = "";
    if (value == "Yes")
    {
        strMessage = "This is the Second Yes Question";
    }
    else
    {
        strMessage = "This is the Second No Question";
    }

    ViewBag.FirstQuestData = strMessage;
    return Content(strMessage); //No need to return complete View
}

您可以在 Ajax post 调用中收到此消息，如下所示:

    $("#YesNo").change(function () {
            val = $("#YesNo").val();
            var url = "../Home/Decision";
            $.post(url, { value: val},function(data){ 
                         alert(data);
                        //Here you can right your logic to manipulate data
           });
    });

希望这有帮助:

-------- 更新为使用 JSON 数据 -------------------这是返回 Json 的 Controller :

[HttpGet]
public ActionResult YourController() 
{ 
  //Do your Logic
  return Json(new { message = "Data" }, JsonRequestBehavior.AllowGet);
}

$.getJSON("../YourController", function(data) {
     alert(data.foo);
     alert(data.baz);
});