ASP.NET MVC4：在更改文本時，執行ajax請求，然后返回json結果並更新模型，而無需重新加載頁面

Question

如果這有點長，我深表歉意，但這是我的第一篇文章，我知道我可能會被很少信息的文章所拖延，所以就到此為止。

我目前在具有強類型ViewModel的視圖中使用ASP.NET MVC 4進行編碼。 ViewModel很簡單，由原始數據類型組成。 該模型從不用於在數據庫中插入或更新數據，僅用於一頁。 單擊提交按鈕后，我使用控制器對數據庫執行各種查詢，以查看某些字段是否有效（數據注釋無法處理的條件），如果沒有無效字段，則發送數據進入我的流程的下一步。

我的情況是這樣。 在不刷新頁面的情況下，我需要：

1. 檢查ContactID是否已更改
2. 如果ContactID已更改並已填充，請檢查數據庫中的Contact表以查看ContactID是否存在
3. 如果數據庫中存在ContactID，請在模型的相應文本框中顯示聯系人的信息，並禁用這些文本框
4. 如果ContactID不存在，請在ContactID的驗證消息中顯示模型錯誤或某種通知（我希望不發出警報，但我不挑剔），並將模型中的每個文本框設置為null

該標准主要針對用戶。 用戶需要查看將要提交的聯系人。 我無法執行列表視圖，因為如果用戶選擇不輸入ContactID，則仍然需要輸入聯系信息。 話雖如此，我仍然會驗證用戶單擊提交時的情況，以防萬一。

視圖

@model ViewModels.OrderViewModel

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()               
@Html.ValidationSummary(true)

<table>
  <tr>
       <td>
           @Html.TextBoxFor(model => model.OtherDetails, new { id="OtherDetails" })
       </td>
  </tr>
  <tr>
       <td>
            @Html.TextBoxFor(model => model.ContactID, new { id="ContactID" })
            @Html.ValidationMessageFor(model => model.ShipTo)
       </td>
  </tr>
  <tr>
       <td>
            @Html.TextBoxFor(model => model.ContactStreet, new { id = "ContactStreet" })
       </td>
       <td>
            @Html.TextBoxFor(model => model.ContactCity, new { id = "ContactCity" })
       </td>
       <td>
            @Html.TextBoxFor(model => model.ContactState, new { id = "ContactState" })
       </td>
  </tr>

</table>
<input type="submit" value="Submit" />
}

@section scriptContent
{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    @*<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>*@
    <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("form :input:enabled:visible:first").focus();
            $("form :input:enabled:visible:first").select();
            $(".input-validation-error").first().focus();
            $(".input-validation-error").first().select();
        });

        //THIS IS MY CURRENT CODE 
        $('#ContactID').change(function () {
            var ContactIDValue = $('#ContactID').val();

            $.ajax({
                url: '/Order/GetContactInformationForContactID/',
                type: 'POST',
                data: { ContactIDValue: ContactIDValue },
                success: function (result) { alert(result.STREET); }
                   //My database column is called STREET
            });
        });
    </script>
}

模型

public class OrderViewModel
{
    public string OtherDetails { get; set; }
    public string ContactID { get; set; }
    public string ContactStreet { get; set; }
    public string ContactCity { get; set; }
    public string ContactState { get; set; }

}

調節器

[HttpGet]
public ActionResult Index()
{
    //private :)
}

[HttpPost]
public ActionResult Index(OrderViewModel)
{
    //private :)
}

[HttpPost]
public ActionResult GetContactInformationForContactID(string ContactIDValue )
{
    var result = myDB.CONTACTs.Where(r => r.CONTACTID == ContactIDValue ).FirstOrDefault();

    return Json(result );
}

我的代碼現在的工作方式是當用戶輸入ContactID時，頁面將返回警報。 如果匹配，警報將顯示數據庫中的STREET值。 如果沒有匹配項，將只有一個空白警報框。

我嘗試給每個文本框指定一個ID，然后使用javascript調用它們，然后使用Json更新它們，但是我還沒有成功。 我的嘗試方式如下所示。 也許我做錯了嗎？

$('#ContactStreet').Val = result.STREET;

我曾嘗試弄亂一些局部視圖，但是我必須承認我不精通它們，而且我不確定是否會保留模型的完整性。 我希望盡可能使用相同的模型，但是我願意接受其他解決方案。 如果最終需要兩個單獨的模型，那么當用戶單擊“提交”按鈕時，我可能會需要兩個模型。

我期待一些回應； 在過去的一周中，這一直困擾着我。

Answer 1

嘗試$('#Street').Val(result.STREET);

關於Jquery .val（）