ASP.NET MVC Data Feedback through User Controls

Question

In our new product we have a few data entry fields that require you to search for the correct value to place in this field.

When you enter this data entry field I would like to provide a search option via something on the view (perhaps an Ajax implementation) and have it allow searching of the database for the value, but when the result returns I want to keep the existing values in place for other fields not affected by the search.

But I have no idea how to do this with MVC. Does anyone have any suggestions on how this should be done?

Answer 1

Write your data entry page in the usual way for an ASP.NET MVC view. Get it working without the Ajax (e.g., submit works correctly when you just type in the values, without auto complete).

Write the prototype for a JavaScript method you'll called when the user performs a certain action (e.g. presses a key inside of a certain control). But this inside a script tag in your aspx page. Unfortunately, stack overflow seems to "sanitize" script tags in my example, so I can't demonstrate that part. But you're JavaScript prototype will look something like this:

function startAutoComplete() {
}

Now hook up the event handlers on the user interface control. You need to call the function you've just prototyped an appropriate event handlers for your application. From your description, it sounds like you might want to use onkeydown, but there are lots of events to choose from. You probably need to handle more than one event, as appropriate for your application.

So far, everything that we've done has been standard aspx and JavaScript. In this step, we'll do the only part of the whole process which is really different for ASP.NET MVC. You need to add an action to your controller which will be called (indirectly) by the JavaScript prototype you've just written. The action should accept appropriate input (e.g., a string representing the text from control, or something like that, as appropriate for your application) and return its results in JSON format. I'm going to show a really simple example here; feel free to substitute more complex code in your real application.

public ActionResult GetSuggestions(string searchText)
{
    return Json(new {SearchText = searchText});
}

This example just returns a JavaScript object containing one property, which contains the value passed to the function. Like you said, you can write something more useful for your application.

Now you need to call this function in JavaScript. The URI will look something like:

http://localhost/mycontroller/GetSuggestions?searchText=Foo

It is possible to make Ajax calls without a JavaScript library, but much easier if you use jQuery or some other library which handles cross-browser compatibility issues for you. Since I happen to like jQuery, I'll demonstrate that. Let's update the startAutoComplete method we prototyped earlier:

function startAutoComplete() {
    var searchText = $("#myeditorid").text();
    $.getJSON("/mycontroller/GetSuggestions?searchText=" + searchText,
        null,
        autoCompleteResponse);
}

The first line uses jQuery to get the text in the control with the ID myeditorid. We'll pass this to the ASP.NET MVC action as the searchText argument, by appending it as a query string parameter.

The next line, which starts with $.getJSON calls a jQuery function which makes an Ajax call to the URI you specify. We pass an argument, autoCompleteResponse, which is the name of a JavaScript method to be called if the response from the Ajax call is successful. Now we have to write autoCompleteResponse.

function autoCompleteResponse(data) {
    if (data.SearchText)
    {
        $("#myeditorid").text(data.SearchText);
    }
}

This says, "If the data returned has a SearchText property, set the text of the control to that value." Again, do whatever is appropriate for your application with the data returned.