Path issues when deploying MVC applications

One of the issues that comes up when deploying MVC projects to server is, having a conflict with script path, images path,etc . The path structure that deployment does is, creating project name folder and beneath, there is folders for image,script, etc. Irrespective of how you had included in the project, this is the final structure that needs to be considered.

   To test the same, I deployed my project with the following structure working fine locally.  This image showed up with no issues, but it did not work after deployment.

<img src="../../Img/test1.jpg" />

  All I had to do is, replace the above with the following code and it works. :-)...

<img src="~/Img/test1.jpg" />

   Very simple, isn't it? This works fine locally and after deployment too... I had seen in many websites, where I was advised to use Url.Content, actually there was no need for me to implement it... every thing started working fine. Just in case, if this scenario doesn't work, you can always consider using Url.Content("~/<path for file>") and that might help you. Just a thought...

Happy coding...

How to invoke a Web API method within a controller.....

ASP.Net Web API is a powerful tool to retrieve data and to serve a broad range of clients. Once created, it can used to access data in mobile applications too.

   Web API's are helpful to create RESTful services and are similar to MVC controllers, but here the class will be derived from APIController when compared to MVC applications where it will be just Controller. This framework is really helpful to build HTTP based services and can very well control the returned data type  to be json or xml.

   If you are developing an application in MVC, it well suites to have Web API, as it is also based on routing concepts.

 Now lets get into the tutorial to see how to invoke a method in Web API....

 In your MVC controller method, make sure you invoke HttpClient to get started. (for HttpClient, if you have any issues, make sure you refer the namesapce : System.Net.Http;)

 We will use HttpClient and define the URI property within client object as below.....  This defines our base url that the web service is located at...

string url = "http://localhost:1001";
 using (HttpClient client = new HttpClient())
{
     client.BaseAddress = new Uri(url);
     client.DefaultRequestHeaders.Accept.Add(new                  
                                             MediaTypeWithQualityHeaderValue("application/json"));
      
}

In the above, we are using Headers property to define, what kind of data will be handled from server. In the above scenario, we are letting it know that we are dealing json format data. (you can even prefer to use xml format, based on what fits your need well).

Before invoking the method, we should make sure the controller name and method name that we are about to call for data. This defines our path, that we will be using with our client object.

Example : below is our Web API definition...

Given the class name is WebApiTestController, this is how we will use it with our client object.

HttpResponseMessage msg = client.GetAsync("api/WebApiTest/<MethodName>").Result;

Using the above, we can identify if our call was successful by trying the method :
 if(msg.IsSuccessStatusCode), then we had successfully accessed our method  and we can retrieve our data as below...

var mylist = msg.Content.ReadAsAsync<object>().Result;

To have the list converted to a compatible IList<T> object, you can use Result.ToList(); The resultset would be a List object.

  Below is the compiled list for complete code to invoke a web API method....

Happy coding...

HTML Web Grid - How to filter the records using a text box.

In this tutorial, we will go over how to filter a web grid based on an input from a text box. Before getting started, I will be using my earlier tutorial on Web Grid. In that tutorial, I used web service to invoke data from Northwind to display category id, name description etc within a grid.

   Now I will use the same data to filter it based on user input. I will add a textbox and a search button on top of the grid, that will drive the data source to the web grid.

This is my existing screen.

Once I add the new UI elements in this view, this is how my new screen will be...

I had moved my grid to a separate partial view to ease the process of reloading data. I created a new view named "gridview.cshtml" and included the code as given below...

In this view, I had defined an attribute as id using htmlAttributes property. I will be referring this id to display the refreshed data after filtering from existing source.... (I am reusing styles for this grid from various other web sites). Once this is defined, we can start working on UI filter elements and button search click event to do the rest.

I will use a div tag to enclose filter search and the partial view for grid. Below is the code to implement them.

In the above code, I will be displaying the grid through @Html.Partial by passing in the partial view name as the parameter.  By isolating the view to be refreshed, it will help us to re-load it many times, without affecting the other parts of UI.

  Remaining part with the UI will be to write the search click event, before we get into the controller part of the code. Lets write the search event by making an ajax call to the controller method with the parameter value and do a filter on it.

In the above code, I am making a call to my controller method TestPage_Filter, which would fetch the data for web grid without filtering it (by doing it this way, you could use the same code while loading the page too avoiding redundant code). Whatever is entered into the text box will be retrieved for filtering and passed in through the data option. Here we are retrieving the search criteria and storing it in a variable called srchitem. Same will be passed on to the controller on click of the button. On successful completion of process,  the returned data is now loaded into the grid through the grid's id, using .html(result).

This being done, we are totally done with the view side of it. In controller, I had done the same steps for loading the initial grid data and storing it in an IEnumerable<CategoryData> variable. Once I have it there, I use linq to objects to filter my data based on the entered text. Below is the code to retrieve my grid list and filter it.

In the above code, txtval is the parameter passed to the controller method. Here I am doing a filter based on CategoryDescription field, similarly you can do the same for other fields too. Or even better, have a drop down selection in UI and get users response to know, based on which field criteria, it is being searched.

Once I have the filtered list, I will loop through my data model object to map it to my grid elements as below.

If you refer the code above, you can see that the view, I am returning is gridview (the one that contains the grid) along with the filtered data. This data will be associated with the grid and re-loaded. Final view after filtering should be like this....

Happy coding......

HTML Dropdown List

This tutorial will illustrate an example of, how HTML Dropdownlist can be used to load data and include an event to trigger and load another drop down based on the values from the first one.

Open a new MVC project and add a view to execute the following code. For tutorial purpose, I had created a new razor view as HtmlDD.cshtml

 Lets create a class that will be used for the selected values for both the drop downs.

Lets include the model that we will be using in this view.  We will be referring the properties declared within the model and associate them to the selected values in both the drop downs.

 In your view, add the following code for drop down.

In the above code, we included two drop downs. First one will be loaded with values, when loading the page. Second one will be empty, until the we select a value from the first drop down.

To load the first drop down, implement the code below (I am using json data and so I chose to handle it this way).

Until now, running this page should get you displaying with two drop downs (assuming you have an empty structure for htmlDDDemo method), with the first one loaded with values needed. Will go over the rest of code to review, how to implement on change event of first drop down, that will trigger the changes (adding items) to second drop down. This is just my scenario, but again, this can be used to display a Web Grid, filtered by the selected drop down value or other desired actions.

In the above javascript method htmlDDDemo, we are passing in paramvalue, which is the selection from the first drop down and I am passing the same to my controller/methodname?parameter=passedinvalue....

On execution of this script, my second drop down will be loaded with filtered data based on the parameter provided.

Happy coding....

Creating basic SilverLight application (for beginners with HTML exposure)

In this tutorial, we will go over how to create a sample XAML (silverlight page) and display with some contents within the grid (table in HTML).

  Also we will go over, step by step to see how the tables in HTML is different from Grids in XAML and how they can be compared to get a better understanding. This will help us in getting a smooth transition from HTML to Silverlight. This tutorial just deals with very basic UI creation demo.

Lets get started with Silverlight application.... When you open a new project, make sure you select Silverlight from installed templates and select Silverlight application and click ok.

Once you click ok, in the next window, you can chose to host the silverlight app in a separate ASP.NET website or when you dont check it, it will generate a startup HTML page. Similarly, you get the option to chose an ASP.NET web or ASP.NET MVC project.

This window also provides the capability to chose the version of Silverlight that should be used to run the app. Once you click ok to create the project, you could see the file structure created below.

In our application, we will be working on a basic code to create and display how a grid works and also in comparison with html table tags.

 In html we have seen table created and handled in many ways as we wanted. Will walk through the html table tags first and their output and then we can follow the steps to generate the same in Silverlight.

In the above, I generated a 3 X 3 matrix and its corresponding output. Now lets see how to create the same in Silverlight.

 Lets start with xaml page listed above, when we look at MainPage.xaml, this is how the code looks. Here UserControl is the basic Content displaying control, which can display any UI elements like textbox, textblock etc.

Here Grid is the basic layout whose rows and columns will be bound to UI elements in this example. We will be expanding this grid with more rows and columns and add textblocks (similar to labels in html) to display their locations within the grid / table. Add the following code inside the grid.

Now press F5 to run.... You should see the following output...

This is a very simple and easy way to get started with Silverlight. In the above code, we could see the text for TextBlocks are displayed in two different ways to show this can be done. To make it more exciting, there are many other third party tools like Telerik that works great with Silverlight to create more easy handling controls for data display.

Happy coding...