Friday, November 22, 2013

Show selected item details from Autocomplete dropdownlist of jQuery using PartialView

This is a continuation of a series around Autocomplete using jQuery in Asp.net MVC4.

1. Implement Autocomplete using jQuery UI inside Asp.Net MVC4 Application

2. Show selected item details from Autocomplete dropdownlist of jQuery UI – (using Knockout)

3. Show selected item details from Autocomplete dropdownlist of jQuery UI – (using PartialView)

In the last post we looked at how to display details about a selected person from the dropdownlist of jQuery UI Autocomplete using Knockout.js. Knockout.js allowed us to databind our ViewModel with our view.  In this post we are going to look at how to do show details of a person but using a PartialView. 

1. Right click on the Home folder>Add>View.

image

2. Type the name of the view as _Person

image

3. Create another method named GetPerson just like the following but this one returns a PartialViewResult instead of JsonResult.  And in our select statement of LINQ query we are return a custom class with all the properties.  We had to do otherwise we won’t be able to strongly type our view.  For demo purposes I have created the class in the same class as the controller but in real world application I create separate ViewModel folder and create classes there.

[HttpGet]
public PartialViewResult GetPerson(int id)
{
var user = (from p in db.People
join e in db.Employees
on p.BusinessEntityID equals e.BusinessEntityID
join be in db.BusinessEntityAddresses on p.BusinessEntityID equals be.BusinessEntityID
join ad in db.Addresses on be.AddressID equals ad.AddressID
join st in db.StateProvinces on ad.StateProvinceID equals st.StateProvinceID
where p.BusinessEntityID == id
select new PersonDetail
{
Id = p.BusinessEntityID,
FullName = p.LastName + ", " + p.FirstName,
LastName = p.LastName,
FirstName = p.FirstName,
JobTitle = e.JobTitle,
HireDate = e.HireDate,
AddressLine1 = ad.AddressLine1,
City = ad.City,
PostalCode = ad.PostalCode,
State = st.Name
}).ToList().First();
if (user == null)
{
HttpNotFound();
}
return PartialView("_Person", user);
}

Add the following class for PersonDetail below the controller class in your HomeController.

public class PersonDetail
{
public int Id { get; set; }
public string FullName { get; set; }
public string LastName { get; set; }
public string FirstName { get; set; }
public string JobTitle { get; set; }
public DateTime HireDate { get; set; }
public string AddressLine1 { get; set; }
public string City { get; set; }
public string PostalCode { get; set; }
public string State { get; set; }
}

Let's make sure our PartialView _Person.cshtml accepts our model of type PersonDetail.

@model AspNetDemo06.Controllers.PersonDetail
<p>@Model.Id </p>
<p>@Model.FullName </p>
<p>@Model.LastName </p>
<p>@Model.FirstName </p>
<p>@Model.JobTitle </p>
<p>@Model.HireDate </p>
<p>@Model.AddressLine1 </p>
<p>@Model.City = ad.City </p>
<p>@Model.PostalCode </p>
<p>@Model.State </p>

Finally fix few things to fix in our Index.cshtml page. First create a div with id selectedPerson.

<div id="selectedPerson">

</div>

Then in our javascript code, first instead of FindPerson change it to GetPerson. Then in the success method of ajax call just replace the div with the returned partial view.

 $(document).ready(function () {
$("#SearchString").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/Find",
data: "{ 'prefixText': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.value,
value: item.value,
id: item.id,
firstname: item.firstname,
lastname: item.lastname
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2,
select: function (even, ui) {
var businessEntityId = ui.item.id;
$.ajax({
url: "/Home/GetPerson",
type: "GET",
data: { "id": businessEntityId}
}).done(function () {
}).success(function (person) {
$("#selectedPerson").html(person);
});
}
});
});

In the above code line 36 the person object is our partial view that we inserting in the div of id selectedPerson.


image

Monday, November 18, 2013

Show selected item details after selecting an item from autocomplete dropdownlist using Knockout.js

This is a continuation of previous post where we looked at how to implement autocomplete functionality into Asp.net MVC 4 application using jQuery UI and Ajax.  In the previous post when you selected a particular user it redirected you to a different page.  What if we want to show information about that user on the same page without any page refresh.  In this post we are going to do exactly the same thing.  Well there are many ways to do this but I want to show you the one using Knockout.js. To use Knockout.js first include it in our BundleConfig.cs  

bundles.Add(new ScriptBundle("~/bundles/knockout").Include("~/Scripts/knockout-*"));

Second lets tell our _layout.cshtml page to load knockout.

<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/knockout")
@RenderSection("scripts", required: false)
</body>

Add the following javascript below the autocomplete method in Index.cshtml page. This is a PersonViewModel which has properties like LastName, FirstName and BusinessEntityID.

 
//ViewModels Knockout
function PersonViewModel(data) {
this.LastName = ko.observable(data.lastname);
this.FirstName = ko.observable(data.firstname);
this.BusinessEntityId = ko.observable(data.id);
}

We created a ViewModel for the Person Object called PersonViewModel. And ko.observable(data.lastname) means that lastname is an observable property. Next add the following div section where we are going to display selected person’s information.  Inside the span tag see the data-bind=”text: LastName” it will be replaced by the LastName returned from our select function inside autocomplete.

<div style="display: none;" data-bind="visible: true">
<span data-bind="text: LastName"></span>
<span data-bind="text: FirstName"></span>
</div>

In this post I want to just focus on people who are employees. So lets make sure we allow users to search just for Employees. Make appropriate changes suggested below

[HttpPost]
public JsonResult Find(string prefixText)
{
var suggestedUsers = from x in db.People
where x.LastName.StartsWith(prefixText) && x.PersonType == "EM"
select new {
id = x.BusinessEntityID,
value = x.LastName + ", " + x.FirstName,
firstname = x.FirstName,
lastname = x.LastName};
var result = Json(suggestedUsers.Take(5).ToList());
return result;
}

One last thing before we run our application. Replace the window.location.href line with  ko.applyBindings(new PersonViewModel(ui.item));  This will databind our selected person to the datatemplate shown above.

@section scripts{
<script type="text/javascript">
//Javascript function to provide AutoComplete and Intellisense feature for finding Users.
$(document).ready(function () {
$("#SearchString").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/Find",
data: "{ 'prefixText': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.value,
value: item.value,
id: item.id,
firstname: item.firstname,
lastname: item.lastname
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2,
select: function (even, ui) {
ko.applyBindings(new PersonViewModel(ui.item));
}
});
});
//ViewModels Knockout
function PersonViewModel(data) {
this.LastName = ko.observable(data.lastname);
this.FirstName = ko.observable(data.firstname);
this.BusinessEntityId = ko.observable(data.id);
}
</script>
}

image


I just wanted to show that it could be done with Knockout. At this point our search button is non-functional. We will make it functional later. One thing to notice here is that the information about the selected user is grabbed from the initial query we did to find suggested users.  To bring in more information we would have to adjust our LINQ query.  And I know what you are thinking right now, “But Mitul, that would bring in all the unnecessary information about other users in which we are not interested.” So we are going to write another method in our HomeController to bring in information just about that selected person. Before doing that let’s update our model to bring in additional information about our selected person.


Open the ADworks.edmx file inside our Models folder and then click anywhere next to the entity and select “Update Model from Database


image


And then check on these entities Employee, Address, BusinessEntityAddress, StateProvince. 


image

Now FindPerson method will return detailed information about the selected person.
        [HttpGet]
public JsonResult FindPerson(int id)
{
var user = (from p in db.People
join e in db.Employees
on p.BusinessEntityID equals e.BusinessEntityID
join be in db.BusinessEntityAddresses on p.BusinessEntityID equals be.BusinessEntityID
join ad in db.Addresses on be.AddressID equals ad.AddressID
join st in db.StateProvinces on ad.StateProvinceID equals st.StateProvinceID
where p.BusinessEntityID == id
select new
{
Id = p.BusinessEntityID,
FullName = p.LastName + ", " + p.FirstName,
LastName = p.LastName,
FirstName = p.FirstName,
JobTitle = e.JobTitle,
HireDate = e.HireDate,
AddressLine1 = ad.AddressLine1,
City = ad.City,
PostalCode = ad.PostalCode,
State = st.Name
}).ToList().First();
if (user == null)
{
HttpNotFound();
}
return Json(user, JsonRequestBehavior.AllowGet);
}

Inside our select function of AutoComplete we are going to make an ajax call [line 31] to this method passing in the BusinessEntityID [line 35] for the Person to FindPerson method [line 33]. Also I have made changes to the PersonViewModel to reflect all the properites returned from the FindPerson method.

@section scripts{
<script type="text/javascript">
$(document).ready(function () {
$("#SearchString").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/Find",
data: "{ 'prefixText': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.value,
value: item.value,
id: item.id,
firstname: item.firstname,
lastname: item.lastname
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2,
select: function (even, ui) {
var businessEntityId = ui.item.id;
$.ajax({
url: "/Home/FindPerson",
type: "GET",
data: { "id": businessEntityId}
}).done(function () {
}).success(function (person) {
ko.applyBindings(new PersonViewModel(person));
});
}
});
});
//Person Detailed View Model
function PersonViewModel(p) {
this.Id = ko.observable(p.Id);
this.FullName = ko.observable(p.FullName);
this.LastName = ko.observable(p.LastName);
this.FirstName = ko.observable(p.FirstName);
this.JobTitle = ko.observable(p.JobTitle);
this.HireDate = ko.observable(p.HireDate);
this.AddressLine1 = ko.observable(p.AddressLine1);
this.City = ko.observable(p.City);
this.PostalCode = ko.observable(p.PostalCode);
this.State = ko.observable(p.State);
}
</script>
}

Finally lets update our div to reflect all the udpated user properties.

<div style="display: none;" data-bind="visible: true">
FullName:<span data-bind="text: FullName"></span>
<br/> LastName:<span data-bind="text: LastName"></span>
<br/> FirstName:<span data-bind="text: FirstName"></span>
<br/> HireDate:<span data-bind="text: HireDate"></span>
<br/> Job Title:<span data-bind="text: JobTitle"></span>
<br/> AddressLine1: <span data-bind="text: AddressLine1"></span>
<br/> City: <span data-bind="text: City"></span>
<br/> PostalCode: <span data-bind="text: PostalCode"></span>
<br/> State: <span data-bind="text: State"></span>
</div>

Run the application and search a particular user.


image


In this post, we looked at how to show selected user’s information after search for a user using jQuery UI’s autocomplete method.  Initially to display the selected user we simply data binded the object returned by the select object, we didn’t went to server to find more information.  In the final attempt we did another ajax call to the server to find more information about the user.  In the next post we will look into how to show detailed information about a person using a PartialView. 

Friday, November 15, 2013

Implement Autocomplete using Jquery UI inside Asp.NET MVC4 application

I think the title explains what I am going to accomplish in this blogpost.  I assume you have AdventureWorks2012 database, visual studio 2012 installed. So let’s get started.
1. Open Visual Studio 2012/2013. I am using VS2012 for this demo.
2. Create an Asp.Net MVC 4 Application and Click on basic application for this demo.
3. Add a new controller to your project. I am naming it as HomeController and using Empty MVC Controller as template.
image
4. Right Click on Models Folder and Add new Item. From the Data section add a new ADO.NET Entity Data Model.  I named it as ADWorks.edmx
image
5. Choose the AdventureWorks2012 database when prompted during new connection.   Choose Person.Person table when “Choose Your Database Objects and Settings” dialog appears in the Entity Data Model Wizard as shown in the figure.  After adding the model build the project once [Ctrl+Shift+B].
image
6. Open HomeController.cs file and Add Reference to your Models. Then create a new method to find the person.
private AdventureWorks2012Entities db = new AdventureWorks2012Entities();

        [HttpPost]
        public JsonResult Find(string prefixText)
        {
            var suggestedUsers = from x in db.People
                                 where x.LastName.StartsWith(prefixText)
                                 select new { id = x.BusinessEntityID, 
                                     value = x.LastName + “, ”+ x.FirstName, 
                                     firstname = x.FirstName, 
                                     lastname = x.LastName };
            var result = Json(suggestedUsers.Take(5).ToList());
            return result;
        }

In the above code we find all the users that match the text that is entered by the user and only return 5. One thing to note here is that the Value field is the one that is going to be displayed when the dropdown for all the possible values shows up. I pass in a anonymous object with all the possible properties that I want for additional stuff. Usually id is a unique identifier and value is something you want to display. Another thing is notice the HttpPost attribute somehow I tried with HttpGet and it doesn’t like because you have to set JsonRequestBehavior to allow GET.

7. Next Add Index.cshtml page to your View Folder and then add the Html.TextBox where we will enter Person’s LastName, inside Html.BeginForm() as shown in the code. 
    </p>
        Search the Person by typing in the LastName of the user.
    </p>
    <div>
        @using (Html.BeginForm())
        {  
            <p>
                @Html.TextBox("SearchString")
                <input type="submit" value="Search">
            </p>
        }
  </div>

8. Add @scripts.Render("~/bundles/jqueryui") to the _Layout.cshtml page as shown below.
image
9. Open Index.cshtml page and now we will add the Javascript code that will query our Find method of Step6 using ajax method of jQuery and autocomplete method of jQuery UI.  We will add the following script inside section called scripts that will place all this javascript code in place of @RenderSection(“scripts”,required: false) in our _layout.cshtml page. 
@section scripts{
    <script type="text/javascript">
        //Javascript function to provide AutoComplete and Intellisense feature for finding Users.
        $(document).ready(function () {
            $("#SearchString").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Home/Find",
                        data: "{ 'prefixText': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data, function (item) {
                                 return {
                                    label: item.value,
                                    value: item.value,
                                    id: item.id,
                                    firstname: item.firstname,
                                    lastname: item.lastname
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2,
                select: function (even, ui) {
                    window.location.href = '/Home/details/' + ui.item.id;
                    }
            });
        });
    </script>
}

In this step, we use autocomplete method of jQuery UI.  The nested function inside autocomplete takes two object request and response.  We take the response object and pass the text that was entered to the Find method of our controller using jQuery Ajax method. In the case of a success event we take the response object and grab the data and for each item return value, id, firstname and lastname.  On the user interface side we are only going to see the value property in the form of a dropdown list.  Once you select a particular object the select function or callback is triggered with even, ui parameters.  The ui parameter has all the properties that we returned from the success event of the ajax method.  In our select event, I want to redirect the user to a different page where you can see the details of the person.  I have included this in the sample code available on my github account.  Redirection is done by setting window.location.href to the url you wish.

Its time to spin this project in the browser so lets run and see what happens when we type a person’s lastname. 

image

10. Fix CSS. Notice the dropdown style is messed up.  Your marketing department and users would be frustrated.  Let’s fix that. Oh ! But you might say that there is CSS file already included for the autocomplete I see in the Content folder under themes/base right. Actually we forgot to include that in our _Layout.cshtml file. If you use any of the jQuery UI things then replace the existing Styles.Render line with the following. Because in the Bundles.Config file we already have created jQuery UI CSS Style Bundle. We just need to include it if we use it.
    @Styles.Render("/Content/themes/base/css", "~/Content/css")

Test it out if the CSS has changed or not. F5.

image

The full source code for this sample is available on github. In the next post we will check out some fun stuff with the help of Knockout.

Friday, November 1, 2013

Lessons learned in sending emails to users in a complex Asp.Net MVC application using MvcMailer

There are multiple ways to handle mailing in a .net application.  System.Net.Mail is a well known assembly we often use for sending simple email messages.  I am building a fairly complex website with couple of different workflows [nothing to do with Windows Workflow] into it.  In each workflow, the website could be sending multiple emails with different text.  I wanted something maintainable and flexible.  MvcMailer is a very good open source library by SM Sohan to send mails using Razor views.  Razor Views!! yes, I am already sold on this.  It also supports other view engines btw. There is a good documentation on the gitHub and it details all the scenarios.  It is so cool and has already been on Scott Hansleman’s blog.  If you want to pass in strongly typed view then you can check this stackoverflow answer by Darin Dimitrov. Again very cool.  I like the idea of strongly typing and I have no other choice due to sheer complexity of the web application.

I wanted to share some of the lessons I learned in sending multiple emails with different content to different types of users.  Some of the things here is not related to coding but is very important in keeping yourself organized.  I tend to work backwards focusing on what the user will see.  So I first start documenting an Email Template in word document and keep adding them as new ones pop-up.  And I follow most of the steps shown below.

1. Maintain a word document with Email Templates.

This is applicable only if you are building a fairly complex MVC application with different stake holders.  It is very important to get it reviewed by different people involved in the project.  Sometimes you might get the text wrong and may be the intent is not conveyed properly to the end user.  I am not perfect at English and I like to get it reviewed by someone.  I am going to share some tidbits of such a word document. 

Template Name – Send Email to Vendors for product pickup

TemplateId – ET0001

Description

The following email will be sent to all the recipients listed below after all the products requested ready for shipping. After all the requested products are packaged, an order is considered as ready for shipping.

Recipients

1. To the shipping vendor to notify about product pickup for shipping.

Subject

Order ready for pickup

Email Body

[Shipping Vendor’s Full Name],

Your next products order has been ready for pickup and you can come on and no later than [pickup date]

Products Ordered [List Dynamically Populated]

1. Gel

2. Shaving Cream

3. Toothbrush

If you have, any questions or concerns related to your order pickup please contact [contact email address].

[Signature]

 

The purpose of this type of word document is to make sure that all the content you put in front of the user is appropriate for its intended audience. Is the wording right? Is there any misleading information? Are we conveying our intent to the user in a clear and concise manner? All these and more questions need to be ironed out before you ship this feature.  Because later down the road it will be difficult when you have say 25 or 50 different Razor Views, ViewModels sending emails. Right now my application has not reached to that level of complexity but I do see it reaching it. All the text that is underlined in the Email Body will be replaced by strongly typed ViewModel.  The Email Body will closely resemble the Razor Views in the Web Application.  Once you know the structure of all the emails you can start coding Razor Views.  So again it reviewed or proof checked by Project manager or immediate supervisor.

2. Use Strongly Typed Views

After I have my text templates ready, I can directly copy them into the web application.  I scaffold my views as necessary using the Scaffold command.  From point 1 we can create our Strongly Typed View named ET001 [TemplateId].

@using WebsiteName.ViewModels

@model OrderPickupEmailViewModel

@Model.VendorFullName,

Your next products order has been ready for pickup and you can come on and no later than @Model.PickupDeadline

Products Ordered

<ul>

@foreach (var item in @Model.Products)
{
<li>@item</li> 
}
</ul>

If you have, any questions or concerns related to your order pickup please contact @Model.ContactInfo

@Model.Signature

3. Use ViewModels to pass information to Razor Views.

After I construct my Razor Views I know what Properties I should be adding to my ViewModel.  I then create my ViewModel named OrderPickupEmailViewModel see point 2.

public class OrderPickupEmailViewModel

{

public string ToAddress {get;set;}

public string Subject {get;set;}

public string VendorFullName{get;set;}

public DateTime PickupDeadline {get;set;}

public List<string> Products {get;set;}

public string ContactInfo {get;set;}

public string Signature {get;set;}

}

4.  Modify the Interface and Class to accept your custom ViewModels

After the ViewModels are ready I go and modify the interface IUserMailer.cs methods to use my CustomViewModels. 

public interface IUserMailer
{
MvcMailMessage OrderPickupConfirmation(OrderPickupViewModel ordp);
}
After that I modify the method inside UserMailer.cs created as a part of scaffolding.

public virtual MvcMailMessage OrderPickupConfirmation(OrderPickupViewModel ordp)
{
       ViewData = new ViewDataDictionary(ordp);
return Populate(x =>
{
x.Subject = ordp.Subject;
x.ViewName = "RequestSubmissionConfirmation";
x.To.Add(ordp.ToAddress);                });
}
Finally send the email in the respective controller.

[HttpPost]
public ActionResult SendEmail(OrderPickupViewModel model)
{
UserMailer.OrderPickupConfirmation(model).Send();
}
5. Keep common settings inside your web.config file just like MvcMailer stores smtp settings inside web.config file.  You can use web.config transforms to send emails to a redirectfolder and to end users when in production.  
If you are following any techniques or best practices to keep your self then please share in the comments below. I would like to know and get better.