Question

I work with c# MVC3 & razor, Entity Framework and Linq.

I have a form, with two field, the first one Client ID and the second one Store Name.
I would like, when the user enter the ID, then my StoreName field fill automatically… The data would come from a database where this two data are stored.

Answer 1

You could use AJAX. So setup a controller action taking a client id as parameter and that would query your database and return the corresponding store name as JSON result. Then subscribe to the .blur event of the text input containing the store id and send an AJAX call to the controller action to fill the second input field.

Yeah, I know, meaningless jibber-jabber, gimme the codez.

Here:

public ActionResult GetStoreName(int clientId)
{
    // of course thath's just an example here. I have strictly no idea
    // what database access technology you are using, how your models look like
    // and so on. Obviously you will have to adapt this query to your data model.
    var client = db.Clients.FirstOrDefault(x => x.Id == clientId);
    if (client == null)
    {
        return HttpNotFound();
    }

    return Json(new { storeName = client.Store.Name }, JsonRequestBehavior.AllowGet);
}

Now assuming the following view:

<div>
    @Html.LabelFor(x => x.ClientId)
    @Html.TextBoxFor(x => x.ClientId, new { id = "clientId", data-url = Url.Action("GetStoreName") })
</div>
<div>
    @Html.LabelFor(x => x.Store.Name)
    @Html.TextBoxFor(x => x.Store.Name, new { id = "storeName" })
</div>

in a separate javascript file you could subscribe to the .blur event of the first textbox, and trigger the AJAX request to the controller sending it the client id that was entered by the user. In the success callback you would update the second textfield with the result of the AJAX call:

$(function() {
    $('#clientId').blur(function() {
        var clientId = $(this).val();
        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            data: { clientId: clientId },
            success: function(result) {
                $('#storeName').val(result.storeName);
            }
        });
    });
});