4

3つのテキストボックスと3つのドロップダウンがあるcshtmlページがあります。

私の考えは、ユーザーに最初の質問のドロップダウン（YES / NO）を決定させ、この回答に応じて、2番目のテキストボックスに入力し、2番目のドロップダウン（YES / NO）を有効にして、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();
    }

最初のドロップダウンの値を取得し、決定アクションにリダイレクトしていますが、2番目の質問のテキストボックスがいっぱいになりません。また、HTMLコードを含むポップアップのようになりますが、これは避けたいと思います。

つまり、基本的に私の質問は、2番目のテキストボックスに入力するにはどうすればよいですか。ユーザーが（YES / NO）を選択した後、3番目のテキストボックスに入力します。

また、私は正しいアプローチを使用していますか、それとも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 UPDATE ------------- -------------------------- 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ポストコールで受信できます。

    $("#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 結果」を使用する場合は、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() は使用しないでください。応答をキャッシュすると、データがリポジトリと同期しなくなる可能性があります。ただし、次のように ajax 設定で settinb cache = FALSE を設定することで引き続き使用できます。

$.ajaxSetup({cache:false});

この行は ajax 呼び出しの前に置く必要があります。

ありがとう

于 2012-10-08T06:34:31.363 に答える