ASP.NET MVC 4.5 OnBlur 事件文本框

Question

I have a C# ASP.net MVC 4.5 solution. I want to create a form with automated address validation. If you enter a zipcode and housenumber the streetname en city is looked up using an external REST API.

After filling in the housenumber there must be a call to a function in a controller (using AJAX) to look up the address, update the model data and show the result in the form. I can't figure out how to do this.

I was thinking about doing a form post (using AJAX) fired when the onBlur from the housenumber is called. But is this the best way ? Is it really the best way is posting back the whole form ?

Example so far:

<div class="col-md-7">
 @Html.TextBoxFor(model => model.HouseNumber, new { @class = "form-control", @placeholder = "HouseNumber" })
 @Html.ValidationMessageFor(model => model.HouseNumber, null, new { @class = "text-danger" })
</div>

When the TextBox HouseNumber lost focus I want to call the function 'ValidateAddress' in my controller 'AddressBook'. The function will lookup the streetname and city and will fill the model.Streetname and model.City fields.

Answer 1

You can have blur event on HouseNumber textbox

try this

@Html.TextBoxFor(model => model.HouseNumber, new { @class = "form-control", @placeholder = "HouseNumber" onblur = "alert('call some javascript function')"})

or

better use jquery function

updated:

    $("#HouseNumber").blur(function () {
         $.get("ControllerName/ActionMethod",{parameterName:value},function(data){
// extract values from data object and assign ut to your controls
});
});

Answer 2

Well, you could change your controller action to return the model as JSON:

public ActionResult ValidateAddress(YourModel model){
  // Do  your validation
  return Json(model); 
}

and then add an AJAX call to this action and fill your form in the callback:

$( "#HouseNumber" ).blur( function() {
  $.ajax({
    url: "/yourActionUrl",
    type: "POST",
    data: $("#yourForm").serialize(),
    dataType: "json"
  }).done(function( model ) {
    $("#Streetname").val(model.Streetname);
    $("#City").val(model.City);
  });
});

Answer 3

make your get Mathod on controller with same model parameter

public ActionResult Login(LoginData model)
    {
        if (model == null)
        {
            model = new LoginData();
        }
        return View(model);
    }

after filling hoseno Call your function if you want you can use ajax and redirect to your getmethod and pass your model

for validation use script validation so that you can remove or add according to your conditions.