Posted in.Net

Development of Asp.net MVC with Jquery Ajax

Development of Asp.net MVC with Jquery Ajax

Asp.Net MVC developers team have intended this post to explain the development of ASP.Net MVC with Jquery Ajax. You can follow the instruction shared by them and perform the same process at your place.

Asp.Net MVC is the most prominent web technology used these days. The main concern is to integrate client side scripting in Asp.net MVC. In this article we will discuss about how to use Jquery and Ajax in Asp.Net MVC.

Following are the methods of jquery that are used for Ajax requests:

  1. ajax()-It is used to load a page(remote page) using Http request.
  2. load()-It is used to load HTML content from a file and insert it in DOM.
  3. getJSON()- It is used to load JSON using HTTP Get method.
  4. get()-It is used to load a page(remote page) using Http GET method.
  5. getScript()-It is used to load and execute JavaScript content using Http GET method.

USING THE CODE

Create a new MVC project. In this project, we will consume a Weather Forecast Service that is easily available on WebServiceX.Net.

Firstly add a reference to the Jquery Ajax libraries. Add the markup in the head element at the end in Site.Master page as shown below:

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Now create the view using Jquery get method.

<asp:Content ID="index" ContentPlaceHolderID="TitleCntent" runat="server">

Main Page

</asp:Content>

<asp:Content ID="indexCntnt" ContentPlaceHolderID="MainCntnt" runat="server">

<script type="text/javascript">

function getWeather() {

var URL = "/Weather/GetWeather/" + $("#Location").val();

$.get(URL, function(data) {

$("#Res").html(data);

});

}

</script>

<div>

<input type="text" id="Loc" style="width: 320px" />

<input type="button" id="btnSbmit" value="Get Wther"

       onclick="javascript:getWeather();" />

<br /> <br />

<div id="idResult"></div>

</div>

</asp:Content>

As shown in the code, a remote page is loaded using a view with the help of Http GET Request.

The method $.get(URL, function(data)) has two parameters, first is the URL and second is the callback function needed to pass data that is returned from call.

All incoming requests are checked by Asp.Net MVC for routes in order of their registration. It is required to register the URL above in the “Global.asax” file.

Now create a class for Weather Controller and it will GetWther action method.

public ActionResult GetWther(string WId)

            {
                StringBuilder wsb = new StringBuilder();

                WeatherForecast wwf = new WeatherForecast();

                WeatherForecasts wwfs = wwf.GetWeatherByPlaceName(WId);

                WeatherData[] wwd = wwfs.Details;

                wsb.AppendFormat("<B>The Weather Forcast of {0}</B><br />",                              wwfs.PlaceName);

                foreach (WeatherData wd in wwd)

                {

                    if (!string.IsNullOrEmpty(wd.WeatherImage))

                    {
                        wsb.AppendFormat("<img src=\"{0}\" >", wd.WeatherImage);

                        wsb.AppendFormat(" {0}", wd.Day);

                        wsb.AppendFormat(", High {0}F", wd.MaxTemperatureF);

                        wsb.AppendFormat(", Low {0}F<br />", wd.MinTemperatureF);
                    }
                }

                Response.Write(wsb.ToString());
                return null;

            }

Next add a reference to the Weather Forecast Web Service in the controller class. Run the application and see that it will display the weather forecast page.

We can also use getJSON() method in order to call the Web Service.

  1. Load the JSON data using the HTTP get request.
  2. Following is the URL with a parameter that will return a result type JsonResult.
var URL = "/Wther/GetJsnWther/"
  1. $.getJSON is a JSON function that passes three parameters, one is the URL, second is the data(it refers to location in call) and finally the callback function. The callback function is used to pass data that is returned from the call. $.each() function can be used to iterate the data of JSON type.

Now build a GetJWeather  method the class of WeatherController as shown below:

public class WeatherController : Controller

        {
            //

            // GET: /Weather/

            public ActionResult Index()

            {
                return View();
            }


            public JsonResult GetJWeather(string loc)

            {

                WeatherForecast wwf = new WeatherForecast();

                WeatherForecasts wwfs = wwf.GetWeatherByPlaceName(loc);

                return Json(wwfs.Details);
            }
        }

The output produced by both the methods $.getJSON() and $.get() will be same. Thus, client side scripts can be easily integrated in Asp.Net MVC applications as shown in the above example.

Tags: