4

我有一个 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>
}

我的控制器如下：-

        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" })   
}

和控制器动作： -

        [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);
        });

控制器

        [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);
    }
4

2 回答 2

6

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

[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 call 中收到此消息，如下所示：

    $("#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 的控制器：

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

$.getJSON("../YourController", function(data) {
     alert(data.foo);
     alert(data.baz);
});
于 2012-10-01T07:38:01.603 回答
2

如果您使用“Json 结果”从 Controller 向 View 返回响应，请在 Ajax 设置中将数据类型称为“json”

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

你可以在你的'msg'对象中获取结果。

注意：不要使用 getJSON()，因为它会缓存响应，这可能会导致您的数据与存储库不同步。但是您仍然可以通过 settinb cache = FALSE 在 ajax 设置中使用它，如下所示：

$.ajaxSetup({cache:false});

此行应在您的 ajax 调用之前。

谢谢

于 2012-10-08T06:34:31.363 回答