javascript - ASP.NET MVC4 : On text changed, 执行ajax请求，然后返回json结果并更新模型而不重新加载页面

Question

如果这篇文章有点长，我深表歉意，但这是我的第一篇文章，我知道我可能会因为信息很少的帖子而被推迟，所以就在这里。

我目前正在 ASP.NET MVC 4 的 View 中使用强类型 ViewModel 进行编码。 ViewModel 很简单，由原始数据类型组成。该模型从不用于在数据库中插入或更新数据，并且仅用于一页。当单击提交按钮时，我使用 Controller 对数据库执行各种查询，以查看某些字段是否有效(数据注释无法处理的条件)，如果没有无效字段，我发送将数据传送到我流程的下一步。

我的情况是这样的。在不刷新页面的情况下，我需要:

1. 检查 ContactID 是否已更改
2. 如果 ContactID 已更改并已填充，请检查联系人 数据库中的表以查看 ContactID 是否存在
3. 如果数据库中存在该联系人 ID，则显示该联系人的 模型中相应文本框中的信息并禁用 这些文本框
4. 如果ContactID不存在，则显示模型错误或一些错误信息 一种通知(我不想发出警报，但我不是 picky) 在 ContactID 的验证消息中并设置每个 模型中的文本框为空

该标准主要针对用户。用户需要查看将提交哪些联系人。我无法进行 ListView ，因为如果用户选择不输入 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; }

}

Controller

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

我尝试过修改一些部分 View ，但我必须承认我并不精通它们，并且我不确定是否会保留模型的完整性。如果可能的话，我想自始至终使用相同的模型，但我对其他解决方案持开放态度。如果我最终需要两个单独的模型，当用户单击提交按钮时我可能需要它们。

我期待一些回应；这个问题在过去一周一直占用我的时间。

Answer 1

尝试$('#Street').Val(result.STREET);

about Jquery .val()