CODEWITHSUNDEEP
asp.net-mvcforms
hawbsl
hawbsl

Reputation: 16003

How to do MVC form with very simple lookup?

We have a very simple MVC form with a dropdownlist which gets the user's selected city.

We have a list of cities and we know the average temperature (say) for each city.

Almost as a decoration (it's not a core function) for the form it would be nice to show the temperature for the selected city as the user changes it. Something like this:

enter image description here

This has to happen client side, I guess. Or is it AJAX?

At the moment our form is mostly out-of-the-box MVC4 EF auto built with scaffolding.

We populate the dropdownlist like so:

In the Controller: 

ViewData("Cities") = GetCitySelectList()

and in the View: 

@Html.DropDownListFor(Function(model) model.City, TryCast(ViewData("Cities"), SelectList))

... so pretty simple stuff.

There are plenty of tutorials for doing cascading dropdowns which are probably overkill for what we're trying to do here. Also if you google "javascript lookup mvc form" or similar a lot of the results tie you to using a framework (knockout? barebone?) which, again, I'm not familiar with and I don't know if I need for such a simple task.

In fact we're so geared to keeping it simple, and our city list is so short, it's almost worth doing it as a giant if then else in javascript (but, I know, yuk).

What's the simplest way to do this?

Upvotes: 2

Views: 918

Answers (4)

Jatin patil
Jatin patil

Reputation: 4288

You can do it as follows:

  1. Make an Ajax call on change on dropdown and then place the result in the corresponding div.

Html for result:

Temperature:<div id="temp"></div>

Ajax call :

 $("#dropdownId").change(function () {
    $.ajax({
        type: "GET",
        url: "Home/GetTemperature", // your url
        contentType: "application/json; charset=utf-8",
        data : {City : " + $(this).val() +"}
        dataType: "json",
        success: function (result) {
            $("#temp").html(result); // place result in div
        },
        error: function () {
            alert("Error.");
        }
    });
});

Your Action (C#):

[HttpGet]
public JsonResult GetTemperature(string City)
{
    int temp = 30; // Get temp from your db..
    return Json(temp,JsonRequestBehavior.AllowGet);
}

Your Action (VB):

<HttpGet>
Public Function GetTemperature(City As String) As JsonResult
  Dim temp As integer = 30
  Return Json(temp, JsonRequestBehavior.AllowGet)
End Function

Upvotes: 2

Murali Murugesan
Murali Murugesan

Reputation: 22619

Option 1: Using jQuery and make ajax call to fetch a temprature for the cityId passed and set the html of the temprature div or span container

Option 2: Eager Load on page as Javascript object

You could have eager load the cities and temprature into the JSON object and store it.

Here is the controller action code using JSON.Net for json serialization

public ActionResult myAction()
{
MyViewModel model=new MyViewModel();
List<City> cities=new List<City>();//fill the city id, temp
MyViewModel.CityJSON=JsonConvert.SerializeObject(List<City>); 

return View(model)
}

View

@model MyViewModel
// other controls
@Html.HiddenFor(m=>m.CityJSON, new{@id='hdn-city-json'})

JavaScript

var cityList=JSON.parse($('#hdn-city-json')); // returns array of city obj
//do your stuff

Upvotes: 1

Boluc Papuccuoglu
Boluc Papuccuoglu

Reputation: 2346

If you are trying to avoid unneccesary requests to server, yes, you could eager load the whole collection. You can keep the data in a hidden <ul/> tag that you build on your View. Then, you can use jQuery to fire when the dropdown selection changes. But instead of making an AJAX call, you can lookup the temperature in the list instead and set the content of the target div to the return value of the lookup function.

Upvotes: 0

tomkuj
tomkuj

Reputation: 81

You should use AJAX call to the server for the temperature. That's probably the "cleanest" way to achieve what you would like to have on your form.

Upvotes: 1

Related Questions