Step by step how to call a WCF Service Endpoint from both Serial and Asynchromous MVC Controller

   In this tutorial we'll learn how to call a WCF Service from both asynchronous and serial Controllers in Asp.Net MVC. We'll first build a WCF Service, and call it from a Proxy at an MVC Application. Then we'll code an Asynchronous Controller and call the same WCF service but using the async methods automatically created inside the Proxy by Visual Studio.

That way we'll compare the async and serial approaches of calling a WCF service from MVC:



Let's first of all create the WCF as an external project :

Create an Operation contract Interface as follows:

 Then implement that Interface in a class as follows:

 And define the DataContract which is contained in the WCF response:

At the MVC application, add a Service Reference:

Enter the WCF service URL or press "Discovery" :

You'll discover the only method that we declared at the WCF service:

Press OK. If you get an error as this:

That means that your MVC is running at the IIS Express or at the IIS installed at your machine, instead of running on the Developer Server that comes with Visual Studio. The difference is, the former will notice that there are 2 different applications (WCF + MVC) and hence 2 different domains, and will avoid cross-domain calls:

In order to allow cross-domain, add the following code to your web.config file at the WCF project:

<system.webServer><httpProtocol>      <!--THIS IS FOR CORS POLICY-->      <customHeaders>        <add name="Access-Control-Allow-Origin" value="*" />        <add name="Access-Control-Allow-Headers" value="Content-Type" />        <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" />      </customHeaders>    </httpProtocol>  </system.webServer>

After that, may be you don't have an error but you see that the Proxy has not been created at the MVC application, as follows ( you can look for the Proxy classes at the Service References folder of your project: there are supposed to be .cs files containing the methods and classes created to the dialog between the MVC and the WCF service):

Then open the WCF reference at your MVC , and select "Configure" :

There UNCHECK the "Reuse types in referenced assemplies" box:

You'll see immediatly that the Proxy has been built:

Take a look at the Proxy and , specially, at the "async" methods created:

Now add some Controller calling the WCF through that Proxy, and its respective View:

As you can see, both the request and response has been handled by the same thread:

That means, the thread has been blocked waiting for the WCF service to answer the request from the MVC Controller. In other words, if there are 1,000 users in certain moment viewing this MVC web page, the web server will have at least 1,000 threads stuck and consuming its resources while waiting for WCF.
To avoid that situation, let's convert our Controller to an ASYNCHRONOUS method, meaning that no thread will get stuck waiting now:

The only thing you have to add to your Controller is:
1) an "async" expression and a Task<ActionResult> return object,
2) the "await" expression in order to automatically declare this Controller as the callback function to be called back by the:
3) the GetMessageASYNC Proxy method .
That's all the changes. (i added also an "await Task.Delay(3000)" just to make the waiting more heavy, for the test sake). Now you can see that the thread which got the request IS DIFFERENT from the thread corresponding to the callback function which was called by the Proxy when the WCF service sent its response:

That's all!!  In this tutorial we've learned how to call a WCF Service from both asynchronous and serial Controllers in Asp.Net MVC.

Happy programming.....

      By Carmel Schvartzman

כתב: כרמל שוורצמן

Step by Step how to create a WebGrid with Grouping functionality

In this tutorial we'll learn how to create a WebGrid with Grouping support and JQuery UI Accordion enhancement. The Grid will expose data dynamically loaded from database and sent by the Action method from the web server, and will offer Grouping functionality in the shape of a JQueryUI Accordion.

We'll want to create a webgrid with Grouping functionality , showing as follows:

Let's say you have two related tables, connected by a ONE-TO-MANY relationship as follows:

For the sake of Grouping, we'll create an "Intersection Entity" that represents an INNER JOIN between the tables:

As you see, the new Entity just joins the records of the 2 tables. After you built that class in the Model's folder, create a new Controller:

Inside the Controller, code an Action method which JOINS the two tables in an anonymous class:

Then, for each record you fetch, create an Intersection Entity record as well:

public ActionResult Index()
        {
            List<PostComments> comments = new List<PostComments>();
            using (BlogEntities ctx = new BlogEntities())
            {
                var list = (from p in ctx.Blogs
                            join c in ctx.Comments
                            on p.BlogID equals c.BlogID
                            select new
                            {
                                p.BlogID,
                                PostTitle = p.Title,
                                p.MainPicture,
                                c.CommentID,
                                CommentTitle = c.Title,
                                c.Text
                            }
                        ).ToList();
                foreach (var item in list)
                {
                    comments.Add(new PostComments(item.BlogID, item.PostTitle,
                        item.MainPicture, item.CommentID, item.CommentTitle, item.Text));
                }
            }
            return View(comments);
        }

Next, add a View to display the List<>:

Inside the View, add a <div> and an FOREACH clause which runs over a GROUP BY some relevant DISTINCT field, such as the Title :

As you can see, for EACH different Post, we create a <TABLE> with the Title and the Picture of it. And then, we add ANOTHER bucle which appends a new row to the table, for each Comment the Post has:

The whole Grid markup should appears as follows:

<div id="divPosts">
    @{
        foreach (var post in Model.GroupBy(p => p.PostTitle).Select(p => p))
        {
        <h1>@post.Key </h1>
        <div>
            <table>
                <tr>
                    <th>Title </th>
                    <th>Comment </th>
                    <th><img src="Images/@post.First().Image" /></th>
                   
                </tr>
                @foreach (var comment in @post)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => comment.CommentTitle)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => comment.CommentText)
                        </td>                      
                        <td>
                            @Html.ActionLink("Edit", "Edit" )
                            @Html.ActionLink("Details", "Details" )
                            @Html.ActionLink("Delete", "Delete" )
                        </td>
                    </tr>
                }
            </table>
        </div>
        }
    }
</div>

Now, as you can see, we put each GROUP inside a new <div> nested inside an outer <div>. This is for using the Accordion: add the following <script>:

<style>
    th {
        text-align: center;
    }
    td img, th img {
        width:100px;height:100px;
    }
</style>
<script>
    $(function () {
        $("#divPosts").accordion({
            heightStyle: "content"
        });
    });
</script>

Also, we'll need some CSS to properly display the data. We added an JQuery UI Theme to the bundles in the App_Start BundleConfig.cs file:

Of course, we load those CSS files and JQUERY scripts in our _Layout file:

Build and launch the web app, to see the following display:

The user can see the different Posts with its respective Comments, clicking the Accordion titles:

That's all!! 

In this tutorial we've learn how to create a WebGrid with Grouping functionality and JQuery UI Accordion enhancements.  

Happy programming.....
        By Carmel Schvartzman

כתב: כרמל שוורצמן

Step by Step how to create an Ajax enabled Master-Details WebGrid using a Child Action and a Partial View

        By Carmel Shvartzman

In this tutorial we'll learn how to create an Ajax enabled Master-Details WebGrid using a Child Action and a Partial View  . The parental Grid will expose data dynamically loaded from database and sent by the Action method from the web server, and will offer CRUD (Create Retrieve Update Delete) functionality. Also, the Grid will send Ajax requests for paging, sorting and displaying related data in a Details <TABLE>  grid.

The Details WebGrid will fetch the Comments for the selected Posts, and will be served by a Child Action, where we could insert some Application logic and filter the data.
The webgrid will also redirect the user to another web page exposing all comments for a selected Post, web page which will use the same Partial View we're Ajax rendering in the Index web page as a Details table.
We'll want to create a Master-Details webgrid with CRUD functionality , showing as follows:

The style you see comes from a free CSS Template, that can be easely added to your application, as we already explained in this tutorial.

This tutorial will use data fetched from the Entity Framework, exposing the following classes:

For each Blog Post selected in the Master webgrid, we'll display all the related Comments in a subsidiary Details grid.

To create the Master WebGrid we must create our own View, and it will not be difficult if we take advantage of the Scaffolding capacities of the MVC environment. So first let's create a new Controller called "BlogController", automatically creating the necessary Views to cope with the CRUD functionality requirements. So right click over the Controllers folder, and add a new Controller:

Name it "BlogController", and select the template "MVC Controller with read/write actions and views, using Entity Framework":

The Context to use will be of course the one you named while creating your Entity Framework Data Model, and the Model will be the Blog class, because we'll be creating, updating and deleting Blog objects.
After you create the Controller, open it and take a look at the Action Methods created for you: there are action methods for displaying the list of Blog posts (Index method), to create new ones , to update them, and to delete:

Open the Views folder and see the Views that were created for you:

First of all, let's add a link inside the _Layout .cshtml file Menu, in order to browse to the Blog web page from the Home page:

We also add the Scripts.Render calls at the <header> of the _Layout file, in order to load the necessary jquery and CSS files:

Delete the @Scripts.Render("~/bundles/jquery") from the <footer> of the file:

If you want to perform more Ajax calls using @Ajax.ActionLink() , add also a reference to the "jqueryval" bundle: @Scripts.Render("~/bundles/jqueryval") :

Next, we'll need two new Actions in the Blog Controller:
1) a Comments Action method: for rendering the _PostComments template as a View
      at the url "/Blog/Comments/{ID}". You don't need to create a View for this Action method:

2) a DetailsGridComments Child Action method: for rendering the _PostComments  template as a Partial View while performing an Ajax call:

To create the Partial View, open the View's dialog and type the following:

Keep in mind we will use this Partial View as such, inside the Index View, and also as a regular View as the "Comments" View .
Inside the Partial View we got, there are two code areas automatically created, but which we don't need: the "Create" link and the "Edit" buttons, so delete it:

Also, customize the <table> as follows :

We want a WebGrid with paging-sorting capabilities,  instead of a table. So we'll replace the <TABLE> ta g at the Index file with an WebGrid Html Helper: open the Index View:

And comment the whole  <table> tag:

Next, we'll instantiate a WebGrid, using an overload of the extension method with the following parameters:

Back to the Index View,  create a <DIV> enclosure for the WebGrid to be Ajax replaced, and type the final code for the WebGrid  setting as its arguments the data included in the Model, the number of rows to display in each page (2) , and the container to be updated by the Ajax requests :

@{
    ViewBag.Title = "Index";
    WebGrid grid = new WebGrid(Model, rowsPerPage: 2, ajaxUpdateContainerId: "gridDIV");
}

Now we display the markup of the WebGrid using the GetHtml() WebGrid method,  and formatting the   picture field. Also we set the "BlogID" column as the one acting as the SELECTOR that will be clicked by the user in order to Ajax-load all related Comments:

Also, we set the other three columns as hyperlinks to take the user to a "Comments" web page exposing all the comments for a selected Post. We do that using the "format:" parameter, in two ways:
1) we render directly the markup with the <a> tag
2) we return an MvcHtmlString object representing the hyperlink, and enclosing the picture: clicking the    picture will take the user to the "Comments" web page:

We automatically got the paging and sorting WebGrid functionalities. We also got all CRUD functionality that was there before: deleting, editing , and so, by copying the CRUD block that you commented before(inside the <table> tag):

Now return to the Index View, to add the code that will display the Partial View. What we do is to check that some row has been selected in the WebGrid, and then we fetch the selected row, in order to get the ID of the chosen Post.
If the row is not null, we send that ID to a Child Action using the RenderAction() function and that way we got all related comments for that post:

The code (to copy-paste) is the following:

<div id="gridDIV">
@{
     
    @grid.GetHtml(columns: new[] {

        grid.Column("ID",format:(item) =>  item.GetSelectLink(item.BlogID.ToString()) ) ,
        grid.Column("Title",format:@<a href='/Blog/Comments/@item.BlogID'><b>@item.Title</b></a>),
        grid.Column("Text",format:@<a href='/Blog/Comments/@item.BlogID'><i>@item.Text</i></a>),
        grid.Column("Picture",format:(item) =>
        { return new MvcHtmlString("<a href='/Blog/Comments/" + item.BlogID +
            "'><img src='/Images/"+item.MainPicture+"' style='width:100px;height:100px;'></img></a>");
        }),
 
        grid.Column(format:@<td>
            @Html.ActionLink("Edit", "Edit", new { id=item.BlogID })
            @Html.ActionLink("Details", "Details", new { id=item.BlogID })
            @Html.ActionLink("Delete", "Delete", new { id=item.BlogID })
        </td>)
    })
    if (grid.HasSelection )
    {
        MvcApplication1.Models.Blog post = grid.Rows[grid.SelectedIndex].Value;
        Html.RenderAction("DetailsGridComments", new { id = post.BlogID });
    }
     
}
</div>

Notice that we get the VALUE of the selected row as a "Blog" object and NOT as a WebGridRow. Save the project and refresh the browser:

Notice that you got all Paging-Sorting functionalities in an Ajax enabled mode. Now , if you click the ID field you get all the Comments as Ajax request:

We got all the Comments for that post. Now let's try the other Hyperlinks we added, clicking for example the Title or the Picture of some Post:

We are then redirected to the Comments web page, to see all Comments for the selected Post:

In this tutorial we've learned how to create an Ajax enabled Master-Details WebGrid using a Child Action and a Partial View .  
That's all!! 
Happy programming.....

כתב: כרמל שוורצמן