ASP.NET MVC4：在更改文本时，执行ajax请求，然后返回json结果并更新模型，而无需重新加载页面

Question

I apologize if this is a bit long, but this is my first post and I know I can be put-off by posts with little information, so here it goes.

I am currently coding in ASP.NET MVC 4 in a view with a strongly typed ViewModel. The ViewModel is simple, consisting of primitive datatypes. The model is never used to insert or update data in a database, and is only used for one page. When the submit button is clicked, I use the controller to perform a variety of queries on a database to see if certain fields are valid (conditions that can't be handled by data annotations), and if there are no invalid fields, I send the data to the next step in my process.

My situation is this. Without refreshing the page, I need to:

1. Check to see if the ContactID has changed
2. If the ContactID has changed and is populated, check the Contact table in the database to see if the ContactID exists
3. If the ContactID exists in the Database, display the Contact's information in the respective textboxes in the model and disable these textboxes
4. If the ContactID does not exist, display a model error or some kind of notification (I would prefer not to do an alert, but I'm not picky) in the validation message for the ContactID and set each textbox in the model to null

The criteria is mainly for the user. The user needs to see what contact is going to be submitted. I cannot do a list view because the user still needs to be able to enter contact information if they choose not to enter a ContactID. That being said, I will still validate when the user clicks submit just in case.

View

@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>
}

Model

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

How my code works now is when the user enters a ContactID, the page returns an alert. The alert will display the STREET value from the database if there was a match. If there was not a match, there will just be a blank alert box.

I have tried giving each textbox an id and then using javascript to call them and then update them with the Json, but I have not had success with that. How I tried that is shown here below. Perhaps I am doing it wrong?

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

I have tried messing with some partial views, but I must admit that I am not proficient with them and I am not sure if the model's integrity would be preserved. I want to use the same model throughout if possible, but I am open to other solutions. If I end up needing two separate models, I would likely need both of them when the user clicks the submit button.

I look forward to some responses; this has been a problem that has consumed my time over the past week.

Answer 1

Try $('#Street').Val(result.STREET);

about Jquery .val()