Emeka Emego

How to return HTML in JSON Response using ASP.NET and jQuery

2010-11-01T00:34:00.002+01:00

During the development of my recent project (Delight), I ran into a challenge that normally I wouldn’t believe will take me any time more than what's required to code it straight up.

Because of the heavy use of ajax in the application, I wrote a generic jquery function to handle all ajax request triggered by a particular group of controls or elements, it was very useful and a time saver for me. In most cases, the JSON is returned in this format:

{Successful: "true", Message : "response message", Data : "object or html"}

The interesting part of this response is the "Data" part, it can be of any type, simple or complex object type or (escaped) html.

What I’m going to show you in this post is how to return html content in json response type. The useful thing about this technique is that you get to write your html once in a partial view, which you can then render using full page or ajax request, you can also use the same ajax request with different unrelated url that return different types. This saves you from writing too many codes for different kind of request and reduces view duplication between server and client side.

To demonstrate the trick I explained above, I will be using a mocking framework (Moq) which you can download here and reference in your project. You will also need the jquery library which you can download here.

The screenshot

The working

Start by create a class and name it “Person”. Add the following code below.

public class Person
    {
        public int PersonId { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string JobTitle { get; set; }

        public string Company { get; set; }

        public string ProfilePic { get; set; }

        public List<Email> Emails { get; set; }

        public List<Phone> Phones { get; set; }

        public List<Address> Addresses { get; set; }
    }

    public class Email
    {
        public string Address { get; set; }

        public string Name { get; set; }
    }

    public class Phone
    {
        public string Number { get; set; }

        public string Name { get; set; }
    }

    public class Address
    {
        public string AddressLine { get; set; }

        public string City { get; set; }

        public string State { get; set; }

        public string Country { get; set; }

        public string Name { get; set; }
    }

Now let’s create a service class for our contacts. Add a new class name it "ContactService" and add the following code

public class ContactService
    {
        public List<Person> GetContacts()
        {

//Normally we would have called the contacts list from a database, but this will do for

//demonstration purpose.

List<Person> contacts = new List<Person>();

            contacts.Add(new Person
                             {
                                 PersonId = 1,
                                 FirstName = "Emeka",
                                 LastName = "Emego",
                                 JobTitle = "Web Developer",
                                 Company = "SymaCord",
                                 ProfilePic = "~/content/images/emeka-emego.jpg",
                                 Emails = new List<Email>
                                              {
                                                  new Email
                                                      {
                                                          Address = "symacord@gmail.com",
                                                          Name = "Personal"
                                                      },
                                                  new Email {Address = "info@symacord.com", Name = "Professional"}
                                              },
                                 Phones = new List<Phone>
                                              {
                                                  new Phone {Number = "(234)803 780 8732", Name = "Mobile"},
                                                  new Phone {Number = "(234)838 333 3333", Name = "Personal"}
                                              },
                                 Addresses = new List<Address>
                                                 {
                                                     new Address
                                                         {
                                                             Name = "Home",
                                                             AddressLine = "Plot 123 Nowhere",
                                                             City = "SomeCity",
                                                             Country = "Nigeria",
                                                             State = "Lagos"
                                                         }, 
                                                         new Address {
                                                             Name="Office",
                                                             AddressLine = "Second address 273",
                                                             City = "Ikeja",
                                                             Country = "Nigeria",
                                                             State = "Lagos" } }
                             });

            contacts.Add(new Person
                             {
                                 PersonId = 2,
                                 FirstName = "Chris",
                                 LastName = "Ikani",
                                 JobTitle = "COO",
                                 Company = "Santoch Lotto",
                                 ProfilePic = "~/content/images/no-photo.gif",
                                 Emails =
                                     new List<Email> {new Email {Address = "info@nowheremail.com", Name = "Personal"}},
                                 Phones = new List<Phone>
                                              {
                                                  new Phone {Number = "(234)138 333 3333", Name = "Personal"}
                                              },
                                 Addresses = new List<Address>
                                                 {
                                                     new Address
                                                         {
                                                             Name = "Home",
                                                             AddressLine = "Plot 123 Some place",
                                                             City = "City place",
                                                             Country = "Nigeria",
                                                             State = "Delta"
                                                         } }
                             });

            contacts.Add(new Person
            {
                PersonId = 3,
                FirstName = "Dave",
                LastName = "Obiuwevbi",
                JobTitle = "CEO",
                Company = "Santoch Lotto",
                ProfilePic = "~/content/images/no-photo.gif",
                Emails = new List<Email> { new Email { Address = "info@nowheremail.com", Name = "Personal" } },
                Phones = new List<Phone>(),
                Addresses = new List<Address>()
            });

            contacts.Add(new Person
            {
                PersonId = 4,
                FirstName = "Tunde",
                LastName = "Oduyoye",
                JobTitle = "DGM",
                Company = "Protea Hotel Leadway",
                ProfilePic = "~/content/images/no-photo.gif",
                Emails = new List<Email>(),
                Phones = new List<Phone>(),
                Addresses = new List<Address>()
            });

            contacts.Add(new Person
            {
                PersonId = 5,
                FirstName = "Biodu",
                LastName = "Bameke",
                JobTitle = "Building Contractor",
                Company = "Jobams Group",
                ProfilePic = "~/content/images/no-photo.gif",
                Emails = new List<Email>(),
                Phones=new List<Phone>(),
                Addresses= new List<Address>()
            });

            contacts.Add(new Person
            {
                PersonId = 6,
                FirstName = "Isaac",
                LastName = "Okwu",
                JobTitle = "President",
                Company = "Africa Farming Project",
                ProfilePic = "~/content/images/no-photo.gif",
                Emails = new List<Email>(),
                Phones = new List<Phone>(),
                Addresses = new List<Address>()
            });

            contacts.Add(new Person
            {
                PersonId = 7,
                FirstName = "Johnson",
                LastName = "Clark",
                JobTitle = "Graphic Designer",
                Company = "Design Vision Inc",
                ProfilePic = "~/content/images/no-photo.gif",
                Emails = new List<Email>(),
                Phones = new List<Phone>(),
                Addresses = new List<Address>()
            });

            return contacts.OrderBy(x=>x.FirstName).ToList();
        }

        public Person GetContact(int personId)
        {
            return GetContacts().Where(x => x.PersonId == personId).FirstOrDefault();
        }
    }

Here is the action method to get the list of contacts.

public ActionResult Contacts()
        {
            List<Person> contacts = _contactService.GetContacts();

            return View(contacts);
        }

In other to be able to return our view in a json response, we need to mock the request and pass our partial view as the return view. The code below demonstrates that. Add this action method in the same controller as above.

public ActionResult Contact(int id)
        {
            //Get the requested person object
            Person contact = _contactService.GetContact(id);

            try
            {
                var writer = new StringWriter();
                var moqContext = new Mock<HttpContextBase>();
                var response = new Mock<HttpResponseBase>();
                moqContext.Setup(ctx => ctx.Response).Returns(response.Object);
                response.Setup(res => res.Output).Returns(writer);

                var requestContext = ControllerContext.HttpContext;
                ControllerContext.HttpContext = moqContext.Object;

                var partialView = PartialView("PartialPersonDetails", contact);
                partialView.ExecuteResult(ControllerContext);
                var resultHtml = writer.ToString();

                ControllerContext.HttpContext = requestContext;

                return Json(new {Successful = true, Data = resultHtml},JsonRequestBehavior.AllowGet);

            }catch(Exception ex)
            {
                return Json(new { Successful = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
            }
        }

Now let’s look into our partial view. Create a partial view and name it "PartialPersonDetails".
Add the below code to the view.

<div style="background:#F3F3F3; padding:10px; overflow:auto;">
<img src="<%=Url.Content(Model.ProfilePic) %>" style="float:left; border:1px solid #cccccc;" />

<div style="margin-left:60px;">
<b><%=Model.FirstName+ " "+Model.LastName %></b><br />
<%=Model.JobTitle %> at <%=Model.Company %>
</div>
</div>

<div class="contact-detail">
<%if (Model.Addresses.Count > 0){%>
<fieldset>
<legend>Address</legend>

<%foreach (var x in Model.Addresses){%>
<dl>
<dt><%=x.Name %></dt>
<dd>
<%:Html.Encode(x.AddressLine) %> <%:Html.Encode(x.City) %><br />
<%=x.State %>, <%=x.Country %>.
</dd>
</dl>
<%} %>
</fieldset>
<%} %>

<%if (Model.Emails.Count > 0)
  {%>
<fieldset>
<legend>Email</legend>

<% foreach (var x in Model.Emails)
      {%>
<dl>
<dt><%=x.Name%></dt>
<dd><%:Html.Encode(x.Address)%>
</dd>
</dl>
<% }%>
</fieldset>
<% }%>

<%if (Model.Addresses.Count > 0)
  {%>
<fieldset class="last">
<legend>Phone</legend>

<%
      foreach (var x in Model.Phones)
      {%>
<dl>
<dt><%=x.Name%></dt>
<dd><%:Html.Encode(x.Number)%>
</dd>
</dl>
<%
      }%>
</fieldset>

<%
  }%>
</div>

Now create a new view called "Contacts" for the contacts' action method and add the code below

<h1>Contacts</h1>

<div class="contact-wrapper">
<ul class="contact-list">
<%foreach(var c in Model) {%>
<li>
<div>
<a href="<%=Url.Action("contact",new{id=c.PersonId}) %>"><%=c.FirstName + " " + c.LastName%></a>
<br />
<span><%=c.Company %></span>
</div>
</li>
<%} %>
</ul>

<div id="details">

</div>
</div>

Here is the ajax call to get and process the response. Add this to the "Contacts" view.

<script type="text/javascript">
    $(document).ready(function() {
        $('ul.contact-list li a').click(function() {
        var $this = $(this);
            
            $.ajax({
            url: $this.attr("href"),
            type: "GET",
                dataType: "json",
                error: function(xmlHttpRequest, textStatus, errorThrow) {
                    alert("Woops! " + textStatus);
                },
                success: function(result) {

                    if (result.Successful) {
                        $('#details').html(result.Data);
                    }
                    else {
                        alert(result.Message);
                    }
                }
            });
            return false;
        });
    });
</script>

Note that you need to download and reference the jquery library. Download jquery library here http://jquery.com/

That's all we need to get things to run properly. Note that I omitted the inclusion of css in this post to keep things in point. However, you can download the source code here to see this in action.

Somehow this example failed to work in .NET 3.5, but worked fine in 4.0. I hope you find this post useful.

Sending SMS With ASP.NET MVC

2010-10-29T00:34:00.004+01:00

Introduction

In this post, I will be sharing the experience I had (integrating SMS) during the development of Delight. With the rising usage of mobile devices, statistics have shown that SMS is the most effective way to communicate, especially for all type of businesses. Honestly, SMS integration to a website if you ask me I would say is easy if you want to stick to just one provider no matter what the future brings. However, this was not the case for Delight, we needed solution that won't require us to rewrite the entire procedure in case we find a better offer by other SMS gateway providers in the future.

The SMS gateway provider I would be using for this post is SMSLive (http://smslive247.com). Before you can use their gateway to send SMS, you must sign-up an account with them and create a sub-account that will be used for sending SMS from your application, the account registration is free.

In other to have a better understand of this tutorial, you need the API documentation (optional for this tutorial) which you can download from their website.

Final view of the application.

Programming the SMS functionality

Enter the following settings in your web.config AppSettings section.

<add key="SmsUrl" value="http://www.smslive247.com/http/index.aspx"/>
<add key="SmsAccount" value="YOUR-SMSLIVE-EMAIL-ADDRESS"/>
<add key="SubAccount" value="YOUR-SMSLIVE-SUBACCOUNT"/>
<add key="SubAccountPass" value="YOUR-SMSLIVE-SUBACCOUNT-PASSWORD"/>

Now we need a way to access those information in the web.config AppSetings section. Create a new class and name it “ConfigService” and enter the codes below.

public class ConfigService
    {
       public ConfigService(){}

        /// <summary>
        /// Get the SMS gateway url
        /// </summary>
        public string SmsUrl
        {
            get { return getAppSetting(typeof(string), "SmsUrl").ToString(); }
        }

        /// <summary>
        /// Get teh gateway account to use in sending sms message
        /// </summary>
        public string SmsAccount
        {
            get { return getAppSetting(typeof(string), "SmsAccount").ToString(); }
        }

        /// <summary>
        /// Get the sub account to use for the sending of sms
        /// </summary>
        public string SubAccount
        {
            get { return getAppSetting(typeof(string), "SubAccount").ToString(); }
        }

        /// <summary>
        /// Get the sub account password for the sms gateway
        /// </summary>
        public string SubAccountPwd
        {
            get { return getAppSetting(typeof(string), "SubAccountPass").ToString(); }
        }

        private static object getAppSetting(Type expectedType, string key)
        {
            string value = ConfigurationManager.AppSettings[key]; //.Get(key);

            if (value == null)
            {
                throw new Exception(
                    string.Format("The config file does not have the key '{0}' defined in the AppSetting section.", key));
            }

            if (expectedType.Equals(typeof (int)))
            {
                return int.Parse(value);
            }

            if (expectedType.Equals(typeof (string)))
            {
                return value;
            }
            else
                throw new Exception("Type not supported.");
        }
    }

Let’s create a model for our SMS so it will be easier for us to validate it if we want to.

public class SMS
    {
        public string Numbers { get; set; }

        public string SenderId { get; set; }

        public string Message { get; set; }
    }

Remember we are not planning to stick with the current SMS provider for life, at least not when we have a better offer from another provider. This will make our SMS integration a bit lengthy but will pay in the long run.

Create a new class, name "SmsService" and add the following codes.

public class SmsService
    {
        private ConfigService _config;
        private Cache _cache;

        private string sessionId_cahe_key = "SmsSessionId_" + "GetSessionId";

        public SmsService()
        {
            _config = new ConfigService();
            _cache = HttpContext.Current.Cache;
        }

        //Default method for making request to the SMS gateway. This method is not likely to be changed no matter what 
        //SMS gateway provider you want to use in the future.
        private string makeHttpRequest(string url)
        {
            //Initialize the web request
            var webReq = (HttpWebRequest)WebRequest.Create(url);
            webReq.ContentLength = 0;

            webReq.Method = "POST";//We're making a post request. This is the recommended method by the gateway.
            webReq.Timeout = 600000;//Set the timeout for the request

            var webResp = (HttpWebResponse)webReq.GetResponse();

            //Read the response and output it.
            Stream answer = webResp.GetResponseStream();
            StreamReader _answer = new StreamReader(answer);

            string result = _answer.ReadToEnd();

            return result;
        }

        //Instead of providing the subaccount and password in information every request to the SMS gateway, 
        //we use this method to get a session id from the gateway and pass to the service. 
        //This approach is more secure.
        public string Login()
        {
            string result = null;
            //Get the gateway url from the web.config AppSettings section
            string smsUrl = _config.SmsUrl;

            //Form the command for login to send to the gatway. You can download the api documentation 
            //from http://smslive247.com
            string smsCmd = "?cmd=login&owneremail=" + _config.SmsAccount + "&subacct=" + _config.SubAccount +
                            "&subacctpwd=" + _config.SubAccountPwd;

            try
            {
                return result = makeHttpRequest(smsUrl + smsCmd);
            }
            catch (Exception err)
            {
                throw err;
            }
        }

        public string GetSessionId()
        {
            string result = null;//hold the returned message from the request
            bool success = false;//indicate if request is seccessful or not

            //First look for the session id in the cache items, if it does not exist, then trying making a request to the SMS gateway
            //for session id, otherwise get it from the cache
            if (_cache[sessionId_cahe_key] != null)
                result = (string)_cache.Get(sessionId_cahe_key);
            else
            {
                string response = Login();//Call the login method to get the session id from the sms gateway

                string errMsg = null;
                //process and return the response data from the login call in a friendly format
                result = GetResponseMessage(response, out success, out errMsg);

                if (success)//add the session id to the cache if the login request was successful
                {
                    _cache.Add(sessionId_cahe_key, result, null, DateTime.Now.AddHours(2), Cache.NoSlidingExpiration,
                               CacheItemPriority.Normal, null);
                }
            }
            return result;//return the session id
        }

        //Process the response from the sms gateway. By default, the gateway's response is in format below
        //OK: [RESPONSE-Message] -or- ERR: [ERROR NUMBER]: [ERROR DESCRIPTION]
        public string GetResponseMessage(string response, out bool success, out string errMsg)
        {
            //if the response contains 'OK', then the request was successful
            bool isSuccess = response.Substring(0, response.IndexOf(":") + 1).Contains("OK");
            //This holds the code returned from the request. Anything other than 0 means error
            string code = null;
            //This variable holds the description of the error message
            string errDesc = null;

            //get the code for the request
            if (isSuccess)
            {
                code = response.Substring(response.IndexOf(":") + 2);
            }
            else
            {
                code = response.Substring(response.IndexOf(":") + 2, response.LastIndexOf(":") - 1);
                errDesc = response.Substring(response.LastIndexOf(":") + 2);
            }

            success = isSuccess;
            errMsg = errDesc;
            return code;
        }

        public string Send(SMS sms)
        {
            string sessionId = GetSessionId(); //Get the session id
            string smsUrl = _config.SmsUrl; //Get the sms gatway url from the config file

            //Form the command for sending message. You can download the API documentation for full list of commands
            //from http://smslive247.com
            string smsCmd = String.Format("?cmd=sendmsg&sessionid={0}&message={1}&sender={2}" +
                                          "&sendto={3}&msgtype=0", sessionId, sms.Message, sms.SenderId, sms.Numbers);

            bool isSuccess = false;
            string errMsg = null;
            //Send sms message
            string response = makeHttpRequest(smsUrl + smsCmd);

            //Process the response from the gateway
            string code = GetResponseMessage(response, out isSuccess, out errMsg);

            //401 error code indicate invalid Session ID. If the session id is not valid, then delete it from cache and make a 
            //request to get a new session id from the sms gateway
            if (code == "401")
            {
                _cache.Remove(sessionId_cahe_key);//delete the session id from the cache

                sessionId = GetSessionId(); //Get the session id
                smsCmd = String.Format("?cmd=sendmsg&sessionid={0}&message={1}&sender={2}" +
                                          "&sendto={3}&msgtype=0", sessionId, sms.Message, sms.SenderId, sms.Numbers);

                return makeHttpRequest(smsUrl + smsCmd);//resend the sms to the gateway
            }

            return response;
        }
    }

I would be using ASP.NET MVC in the following example, the process to implement this in whatever C# application you want to use it in is the same. If you are working on ASP.NET web-form for example, all you need to do is just substitute the Action method to the control’s method you want to trigger the sending of SMS from.

[HttpPost, ActionName("send-sms")]
        public ActionResult SendSMS(SMS sms)
        {
            if (ModelState.IsValid)
            {
                try
                {
                    bool isSuccess = false;
                    string errMsg = null;
                    string response = _smsService.Send(sms); //Send sms

                    string code = _smsService.GetResponseMessage(response, out isSuccess, out errMsg);

                    if (!isSuccess)
                    {
                        ModelState.AddModelError("", errMsg);
                    }
                    else
                    {
                        ViewData["SuccessMsg"] = "Message was successfully sent.";
                    }
                }
                catch (Exception ex)
                {
                    ModelState.AddModelError("", ex.Message);
                }
            }

            return View(sms);
        }

The HTML

<%=Html.ValidationSummary() %>
<%if (ViewData["SuccessMsg"]!=null){%>
<div class="success"><%=ViewData["SuccessMsg"] %></div>
<%} %>

<form action="<%=Url.Action("send-sms","home") %>" method="post">
<label for="Numbers">Send To</label><br />
<%=Html.TextBox("Numbers") %><br /><br />

<label for="Message">Message</label><br />
<%=Html.TextArea("Message","",new{rows="4",cols="35"}) %><br /><br />

<label for="SenderId">SenderId</label><br />
<%=Html.TextBox("SenderId") %><br /><br />

<input type="submit" value="Send Now" />
</form>

That’s it, we now have a functional website with SMS functionality. You can download the full source code here.

Conclusion

I hope you find this useful. Depending on the kind of Application you’re building, there’s so much more you can do with SMS to make things easier for your users.