Export to Excel, Send Email and Captcha Implementation in ASP.NET MVC

Create a project, name it "ExportToExcelSendEmailandRecaptcha"

After you add the project Select "MVC" project and click "Ok"

You will see the following solution is added

Add a ViewModel Folder and right click and add class. As class as "Instructor.cs"

After this define the model, please remember for this demo the model is not important so I am not going to database and creating the model. I will only be using this viewModel as my model.
Add the following code in "Instructor.cs"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ExportToExcelSendEmailandRecaptcha.ViewModel
{
   public class Instructor
   {
     public string FirstName { get; set; }
     public string LastName { get; set; }
     public string Email { get; set; }
     public string Mobile { get; set; }
   }
}


Now that we have created the class for model, let's go to HomeController.cs and make the following changes to display our index page as it would come from the database. Add the following code in index action method.

public ActionResult Index()
{

    var instructors = new List<Instructor>
    {
     new Instructor{FirstName="Carson", LastName = "Alexander", Email="carson.alexander@xyz.com", Mobile="8888888888"},
     new Instructor{FirstName="Meredith", LastName = "Alonso", Email="carson.alexander@xyz.com", Mobile="8888888888"},
     new Instructor{FirstName="Arturo", LastName = "Anand", Email="carson.alexander@xyz.com", Mobile="8888888888"},
    new Instructor{FirstName="Gytis", LastName = "Barzdukas", Email="carson.alexander@xyz.com", Mobile="8888888888"},
   new Instructor{FirstName="Yan", LastName = "Li", Email="carson.alexander@xyz.com", Mobile="8888888888"},
   new Instructor{FirstName="Peggy", LastName = "Justice", Email="carson.alexander@xyz.com", Mobile="8888888888"},
   new Instructor{FirstName="Laura", LastName = "Norman", Email="carson.alexander@xyz.com", Mobile="8888888888"},
   new Instructor{FirstName="Nino", LastName = "Olivetto", Email="carson.alexander@xyz.com", Mobile="8888888888"}
    };
   TempData["instructors"] = instructors;
   return View(instructors);
}

This should give us the normal kind of view whenever we open an index view, but for that you need to right click on the action and click view. Let's make the view linked to the viewmodel we had created for making it easy to implement.

Now click run and this is the page you should see

Now add the Export to excel button to the view, write the following code in the view:

Now your view should look like this.

Now let's implement the export to excel button. In the controller add the following code.
In the action definition add

Now add the reuse object with the following code, please also note the reference added

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ExportToExcelSendEmailandRecaptcha.ViewModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace ExportToExcelSendEmailandRecaptcha.Reuse
{
    public class Reuse
    {
        internal void actualExport(List<Instructor> instructors, HttpResponseBase resp)
        {
            GridView gv = new GridView();
            gv.DataSource = instructors;
            gv.DataBind();
            resp.ClearContent();
            resp.Buffer = true;
            resp.AddHeader("content-disposition", "attachment; filename=" + "instructor" + ".xls");
            resp.ContentType = "application/msexcel";
            resp.Charset = "";
            StringWriter sw = new StringWriter();
            HtmlTextWriter htw = new HtmlTextWriter(sw);
            gv.RenderControl(htw);
            resp.Output.Write(sw.ToString());
            resp.Flush();
            resp.End();
        }
    }
}

Now you are ready, click on the button and you should be asked to save the excel sheet.

You can save the excel sheet and you will see that you have the same table as in index

Now let's move to the other section for sending Email using hotmail (Now Outlook) using your code. The idea is the administrator will get email when comment will be updated by anyone in the website.

First in the Reuse.cs add the following reference

using System.Net;
using System.Net.Mail;

//Then add this code below the actualExport function:


internal bool sendEmail(string strReceiver, string strSubject, string strComment)
{
       try
       {
                MailMessage mailMessage = new MailMessage();
                mailMessage.From = new MailAddress("defAdminEmail@hotmail.com", "anyAlias");
                mailMessage.To.Add(strReceiver);
                mailMessage.Subject = strSubject;
                mailMessage.Body = strComment;
                mailMessage.IsBodyHtml = true;

                SmtpClient smtpClient = new SmtpClient();
                smtpClient.Host = "smtp-mail.outlook.com";
                smtpClient.Port = 587;
                smtpClient.EnableSsl = true;

                NetworkCredential networkCredential = new NetworkCredential();
                networkCredential.UserName = "abc@hotmail.com";
                networkCredential.Password = "abcde";
                smtpClient.UseDefaultCredentials = true;
                smtpClient.Credentials = networkCredential;

                smtpClient.Send(mailMessage);
                return true;
         }
         catch (Exception e)
         {
                return false;
          }
 }

anyAlias highlighted in orange is the display name with which the email will be sent. Now in the HomeController add the contact function

public ActionResult Contact()
{
    ViewBag.Message = TempData["submitMessage"];
    return View();
}

Now create another ViewModel as follows and name it ContactWithEmail.cs. I am creating this ViewModel even for one single component in the page to show that we can have components exported in email and also to make it easier for Captcha implementation, which I will talk about later.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace ContosoUniversity.ViewModels
{
    public class ContactWithEmail
    {
        [Required(ErrorMessage = "Please enter Comment")]
        public string Comment { get; set; }
    }
}

now build the code to add strongly typed view with the ViewModel. Select the following options:

With this an edit form will be generate called Contact.cshtml. In the generated code you will see @Html.EditorFor. Please change that to @Html.TextAreaFor. The code will look like the following now

@model ExportToExcelSendEmailandRecaptcha.ViewModel.ContactWithEmail
@{
    ViewBag.Title = "Contact";
}

<h2>Contact</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>ContactWithEmail</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @ViewBag.Message
        <div class="form-group">
        @Html.LabelFor(model => model.Comment, htmlAttributes: new { @class = "control-label col-md-2" })
        @Html.TextAreaFor(model => model.Comment, new { htmlAttributes = new { @class = "form-control" }, rows="5", cols="50" })
        @Html.ValidationMessageFor(model => model.Comment, "", new { @class = "text-danger" })
    </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>

}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Now let's create the post action for contact with the following code

[HttpPost]
public ActionResult Contact(ContactWithEmail contact)
{
     if (ModelState.IsValid)
      {
           if (ReUse.sendEmail("abc@hotmail.com", "From Website", contact.Comment))
           {
               TempData["submitMessage"] = "You have successfully submitted your message, you will be contacted shortly";
               return RedirectToAction("contact");
           }
           else
           {
               TempData["submitMessage"] = "Sorry currently your email couldn't be sent";
                return RedirectToAction("contact");
            }
        }
       return View(contact);
}

Please try to put a comment and send message now to see it will work :)

Now let's move to captcha implementation, we don't want bots saving comments do we. For this we need to go to NuGet and get ReCaptcha plugin. Open NuGet and search for ReCaptcha as below:

Click on install and follow through. Now add the following to the reference in HomeController.cs

using Recaptcha.Web;
using Recaptcha.Web.Mvc;
using System.Threading.Tasks;

Then make the following changes to the Web.config file that is on the outermost solution

<appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
    <add key="recaptchaPublicKey" value="6LcYP-YSAAAAAG4Pir8LWAtarfN7ZfEaGgJ9H7Gv" />
    <add key="recaptchaPrivateKey" value="6LcYP-YSAAAAAHq5pXcy5_PB7nY-AB-P-4hVG9rO" />
</appSettings>

In the contact.cshtml make the following changes (highlighted in yellow)

@model ExportToExcelSendEmailandRecaptcha.ViewModel.ContactWithEmail
@using Recaptcha.Web.Mvc;
@{
    ViewBag.Title = "Contact";
}

<h2>Contact</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>ContactWithEmail</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @ViewBag.Message
        <div class="form-group">
        @Html.LabelFor(model => model.Comment, htmlAttributes: new { @class = "control-label col-md-2" })
        @Html.TextAreaFor(model => model.Comment, new { htmlAttributes = new { @class = "form-control" }, rows="5", cols="50" })
        @Html.ValidationMessageFor(model => model.Comment, "", new { @class = "text-danger" })
    </div>
        <div class="form-group">
            @Html.Label("   ", new { @class = "col-sm-2 control-label" })
            @Html.Recaptcha(theme: Recaptcha.Web.RecaptchaTheme.Clean)
        </div>
        <div class="form-group">
           <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}



<div>

    @Html.ActionLink("Back to List", "Index")

</div>

Your contact.cshtml should now look like this

Now let's implement the final code for checking the captcha. This will change the post action method for contact in the HomeController.cs

[HttpPost]
public async Task<ActionResult> Contact(ContactWithEmail contact)
{
     RecaptchaVerificationHelper recaptchaHelper = this.GetRecaptchaVerificationHelper();

     if (string.IsNullOrEmpty(recaptchaHelper.Response))
     {
         ModelState.AddModelError("", "Captcha answer cannot be empty");
         return View(contact);
     }
     RecaptchaVerificationResult recaptchaResult = await recaptchaHelper.VerifyRecaptchaResponseTaskAsync();
     if (recaptchaResult != RecaptchaVerificationResult.Success)
    {
        ModelState.AddModelError("", "Incorrect captcha error");
    }


    if (ModelState.IsValid)
    {
        if (ReUse.sendEmail("abc@hotmail.com", "From Website", contact.Comment))
        {
           TempData["submitMessage"] = "You have successfully submitted your message, you will be contacted shortly";
            return RedirectToAction("contact");
        }
        else
       {
            TempData["submitMessage"] = "Sorry currently your email couldn't be sent";
            return RedirectToAction("contact");
        }
    }
    return View(contact);
}

This is the final implementation. I couldn't find a way to upload my code, if you need, please contact me I will be happy to share. However, I have also pasted all my code below, please don't forget to add NuGet reference for recaptcha.

Final Codes:
HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ExportToExcelSendEmailandRecaptcha.ViewModel;
using System.Collections;
using ExportToExcelSendEmailandRecaptcha.Reuse;
using Recaptcha.Web;
using Recaptcha.Web.Mvc;
using System.Threading.Tasks;

namespace ExportToExcelSendEmailandRecaptcha.Controllers
{
    public class HomeController : Controller
    {
        Reuse.Reuse ReUse = new Reuse.Reuse();

        public ActionResult Index(bool? toExport=false)
        {
            var instructors = new List<Instructor>
            {
                new Instructor{FirstName="Carson", LastName = "Alexander", Email="carson.alexander@xyz.com", Mobile="8888888888"},
                new Instructor{FirstName="Meredith", LastName = "Alonso", Email="carson.alexander@xyz.com", Mobile="8888888888"},
                new Instructor{FirstName="Arturo", LastName = "Anand", Email="carson.alexander@xyz.com", Mobile="8888888888"},
                new Instructor{FirstName="Gytis", LastName = "Barzdukas", Email="carson.alexander@xyz.com", Mobile="8888888888"},
                new Instructor{FirstName="Yan", LastName = "Li", Email="carson.alexander@xyz.com", Mobile="8888888888"},
                new Instructor{FirstName="Peggy", LastName = "Justice", Email="carson.alexander@xyz.com", Mobile="8888888888"},
                new Instructor{FirstName="Laura", LastName = "Norman", Email="carson.alexander@xyz.com", Mobile="8888888888"},
                new Instructor{FirstName="Nino", LastName = "Olivetto", Email="carson.alexander@xyz.com", Mobile="8888888888"}
            };
            
            //Not for first time load, will be triggered only when you click on export to excel
            if (toExport == true)
            {
                ReUse.actualExport(instructors.ToList(),this.Response);
            }
            return View(instructors);
        }

        public ActionResult Contact()
        {
            //For error or success message display when redirected
            ViewBag.Message = TempData["submitMessage"];
            return View();
        }

        [HttpPost]
        public async Task<ActionResult> Contact(ContactWithEmail contact)
        {
            RecaptchaVerificationHelper recaptchaHelper = this.GetRecaptchaVerificationHelper();

            if (string.IsNullOrEmpty(recaptchaHelper.Response))
            {
                ModelState.AddModelError("", "Captcha answer cannot be empty");
                return View(contact);
            }
            RecaptchaVerificationResult recaptchaResult = await recaptchaHelper.VerifyRecaptchaResponseTaskAsync();

            if (recaptchaResult != RecaptchaVerificationResult.Success)
            {
                ModelState.AddModelError("", "Incorrect captcha error");
            }

            if (ModelState.IsValid)
            {
                if (ReUse.sendEmail("abc@hotmail.com", "From Website", contact.Comment))
                {
                    TempData["submitMessage"] = "You have successfully submitted your message, you will be contacted shortly";
                    return RedirectToAction("contact");
                }
                else
                {
                    TempData["submitMessage"] = "Sorry currently your email couldn't be sent";
                    return RedirectToAction("contact");
                }

            }
            return View(contact);
        }
    }
}

Index.cshtml

@model IEnumerable<ExportToExcelSendEmailandRecaptcha.ViewModel.Instructor>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@using (Html.BeginForm("Index","Home",FormMethod.Get))
{
    @Html.Hidden("toExport",true)
    <input type="submit" class="btn btn-danger" value="Export to Excel" />
}


<p>
    
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.FirstName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LastName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Mobile)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.FirstName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.LastName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Mobile)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

Reuse.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ExportToExcelSendEmailandRecaptcha.ViewModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Net;
using System.Net.Mail;

namespace ExportToExcelSendEmailandRecaptcha.Reuse
{
    public class Reuse
    {
        internal void actualExport(List<Instructor> instructors, HttpResponseBase resp)
        {
            //We will use grid to put the same in excel by creating XML which will be saved as excel
            //create new grid handle
            GridView gv = new GridView();
            //assign the instructor table as datasource
            gv.DataSource = instructors;
            //bind the data source with the grid handle
            gv.DataBind();
            resp.ClearContent();
            resp.Buffer = true;
            //This gives the name of the excel sheet, inplace of "instructor" you can have different filename
            //If you want different file name you can have this also sent from the controller
            resp.AddHeader("content-disposition", "attachment; filename=" + "instructor" + ".xls");
            resp.ContentType = "application/msexcel";
            resp.Charset = "";
            StringWriter sw = new StringWriter();
            HtmlTextWriter htw = new HtmlTextWriter(sw);
            gv.RenderControl(htw);
            resp.Output.Write(sw.ToString());
            resp.Flush();
            resp.End();
        }

        internal bool sendEmail(string strReceiver, string strSubject, string strComment)
        {
            try
            {
                //create the mail message handle, this is given by System.Net.Mail
                MailMessage mailMessage = new MailMessage();
                //This gives the from address for sender
                //First is for the email address and second is for display name
                //Display name can be any but email has to be valid
                mailMessage.From = new MailAddress("abc@hotmail.com", "Contosso University");
                //Add email to be sent to address
                mailMessage.To.Add(strReceiver);
                //Subject for the email
                mailMessage.Subject = strSubject;
                //Body of the email
                mailMessage.Body = strComment;
                //type for email body here I have selected to be HTML
                mailMessage.IsBodyHtml = true;

                //Define smtp handle given by System.Net
                SmtpClient smtpClient = new SmtpClient();
                //Define host, this keeps changing, so check your setting for hotmail
                //Alternatively you can use your gmail also ask smtp server
                smtpClient.Host = "smtp-mail.outlook.com";
                smtpClient.Port = 587;
                smtpClient.EnableSsl = true;

                NetworkCredential networkCredential = new NetworkCredential();
                networkCredential.UserName = "abc@hotmail.com";
                networkCredential.Password = "abcabc";
                smtpClient.UseDefaultCredentials = true;
                smtpClient.Credentials = networkCredential;

                smtpClient.Send(mailMessage);
                return true;
            }
            catch (Exception e)
            {
                return false;
            }
        }
    }
}

ContactWithEmail.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace ExportToExcelSendEmailandRecaptcha.ViewModel
{
    public class ContactWithEmail
    {
        /*You need not necessary add this ViewModel if you have only one column*/
        [Required(ErrorMessage = "Please enter Comment")]
        public string Comment { get; set; }
    }
}

Contact.cshtml

@model ExportToExcelSendEmailandRecaptcha.ViewModel.ContactWithEmail

@*Recaptcha will work only with public and private key. Please register in website*@
@using Recaptcha.Web.Mvc;
@*Recaptcha will work only with public and private key. Please register in website*@


@{
    ViewBag.Title = "Contact";
}

<h2>Contact</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>ContactWithEmail</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @ViewBag.Message
        <div class="form-group">
            @Html.LabelFor(model => model.Comment, htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.TextAreaFor(model => model.Comment, new { htmlAttributes = new { @class = "form-control" }, rows="5", cols="50" })
            @Html.ValidationMessageFor(model => model.Comment, "", new { @class = "text-danger" })
        </div>
        <div class="form-group">
            @Html.Label("   ", new { @class = "col-sm-2 control-label" })
            @Html.Recaptcha(theme: Recaptcha.Web.RecaptchaTheme.Clean)
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Modal Dialog form view using JQuery ASP.Net MVC

Modal dialog form view using JQuery:

Create a project in VWD.

for convinence sake we will call it Modal_JQuery_ASPdotNet_MVC. You can name your project to you liking.

Now click Ok button. Select Internet Project and click Ok. The view engine I use is Razor, so I have selected Razor as my view engine.

Now the basic set up is done. We will have the following items created in Solution explorer for us to use.

Now as you can see you already have Home controller and Views for Home created. Since the modal doesn't have to do much with controller and view (apart from handling the logic and showing the view) we will work on Home controller and Home View to show our Modal dialog.

The idea of this sample is to show a partial view as modal dialog. So we also need to create a partial view which will be displayed as modal dialog. Right click on ~/views/shared/ folder and add a partial view.  As given below:

Now write the code for what you want displayed in the modal dialog. Say we are working on making a Contact Us form. So let's add code for the same.

<label for="Name">Name:</label ><br />

<input id="Namecontact" name="Name" type="text" /><br />

<label for="email">Email:</label><br />

<input id="emailcontact" name="email" type="text" /><br />

<label for="message">Message:</label><br />

<textarea id="messagecontact" name="message"></textarea>

<input class="close" name="submit" type="submit" value="Submit" />

code for the modal is complete with this partial implementation. Now all that remains is writing JQuery involved in respresenting this partial as modal dialog.
Now to start with the JQuery code. Open Index view in ~/Views/Home/. This view is already created by VWD when we created the project. Now for simplicity sake please delete all the below selected code in Index.cshtml.

Now start with the Jquery first include JQuery library, JQuery UI and JQuery Unobtrusive ajax extensions to your code. You can do that by adding the following code:

<script src="@Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>

Now moving forward we will create a action link on click of which will open the modal dialog.

@Html.ActionLink("Contact US","ContactUs","Home",null,
new {@class="openDialog",data_dialog_id="emailDialog",data_dialog_title="contactus"})

Let's break that down for you. @Html.Action generates anchor tag in HTML for us. It has many overload out of which the one we are using has the following component

@Html.ActionLink("Text of the link","Action to be called", "Controller in which action is present", "route values", "Html attributes to be assigned to anchor tag")
So here we have said create a anchor tag with text Contact US which will call the action name ContactUs in controller Home. It doesn't have any route values that is to say we are not passing any parameter to the action and its Html attributes are as follows:
it's class name is openDialog
it's data_dialog_id attribute is emailDialog
it's data_dialog_title attribute is contactus

so now below given HTML will be generated when you do view source:

<a class="openDialog" data-dialog-id="emailDialog" data-dialog-title="contactus" href="/Home/ContactUs">Contact US</a>

Note: data_dialog_id in @Html.ActionLink is converted to data-dialog-id when anchor tag is created. This happens automatically.
Also add a div to display the result thrown from the dailog to be displayed:

<div id="result"></div>

Now write JQuery to create the modal. (please remove comment in case this doesn't work, the comments are added for understanding and don't play any role in code.)

<script type="text/javascript">
    //Below code will clear cache
    $.ajaxSetup({ cache: false }); 
    //Below code will run the JQuery when document is ready. 
    $(document).ready(function () {
    //Below code will append a click event to the class openDialog 
    //which we assigned to the anchor previously
        $(".openDialog").live("click", function (e) {
            //Below code will prevent default action from occuring
            //when openDialog anchor is clicked
            e.preventDefault();
            //This is the actual implementation of the dailog
            $("<div></div>")
            //To the div created for dialog we will add class named dialog
            //this is done so that we can refer to the dialog later
            //we will see this in a short while why it is important
            .addClass("dialog")
            //add attribute add id attribute
            //note id attribute is assigned the same value as data-dialog-id
            //attribute in openDialog anchor
            .attr("id",$(this).attr("data-dialog-id"))
            //below code appends this div to body
            .appendTo("body")
            //below code describes the attribute for the dialog
            .dialog({
                //below code assigns title to the dialog
                //here we use same title as data-dialog-title attribute
                //in openDialog anchor tag
                title: $(this).attr("data-dialog-title"),
                //this will append code to close the dialog
                //and also put close cross(x) in dialog
                //we press ESC key in keyboard will also close dialog
                close: function () { $(this).remove() },
                //below code defines that the dialog is modal dialog
                modal:true
            })
            //below code says take href from openDialog anchor
            //which is /Home/ContactUs and load it to the modal dialog
            .load(this.href);
        });
    });
</script>

Now a small controller code needs to be written to open the modal dialog.
In Home controller write the following code:

public ActionResult ContactUs()
{    
   return PartialView("ContactUs");
}

Now, since we are refering the JQuery library in our Index file we need to clear JQuery reference from our _Layout.cshtml file. so in _Layout.cshtml find the line which says @Scripts.Render
("~/bundles/jquery") and comment it. The way to comment using razor syntax is as follows:

@*@Scripts.Render("~/bundles/jquery")*@

Note:Applies only to guys using VWD2012

Now for final touch so that your modal looks good include JQuery UI CSS in the _Layout.cshtml.

<link rel="stylesheet" type="text/css" href="../../Content/jquery-ui.css" />

And for simplicity sake I suggest you to remove the default style sheet's section which defines ui-dialog for ajax login because it conflicts with the JQuery UI CSS.
Note: Applies only to guys using VWD 2012.

Now our dialog can be opened and if we press ESC key the dialog will close.(screenshot below).

Note you can see that the partial ContactUs.cshtml which we created previously is reflected as dialog here. We can have any kind of form shown as dialog in this way.

Now what happens if I want to take the dialog's data after submit is clicked and process the data and also show it in the page as updated.

We will do that now.

Before we move on with the JQuery let's first create a ContactUs post method controller where we will do the logic processing.  The controller will look like this.

HttpPost]
public ActionResult ContactUs(string name,string email,string message)
{    /*Your other processing logic will go here*/
   return Json(new
   {
       nameret=name,
       emailret=email,
       messageret=message
     },JsonRequestBehavior.AllowGet);
}

Let me explain that to you. This controller will take name, email and message from the modal dialog as input and will output a Json result with name, email and message. Here before returning the content you can also save it to database you if want or you can write any other processing logic like you might want to append Mr/Mrs before the name.

After the controller is done now let's write JQuery code that will call this controller. We need to append this code in the previous script we had defined inside the $(document).ready() function.

//if you see that code in the partial view our submit button
//is defined as .close class, so below code says on document ready
//append click event to this button
$(".close").live("click", function (e) {
            //prevent default action on the button click
            e.preventDefault();
            //get value of name textbox id=Namecontact
            //put in variable name
            var name = $("#Namecontact").val();
            //get value of email textbox id=emailcontact
            //put in variable email
            var email = $("#emailcontact").val();
            //get value of message textarea id=messagecontact
            //put it in variable message
            //note since messagecontact is a textarea
            //we need to use .text() rather than .val()
            var message = $("#messagecontact").text();
            //Start ajax call
            $.ajax({
            //define method for sending data to controller
                type: "POST",
                //define controller URL
                url: "/Home/ContactUs",
                //define data to send to controller
                //if you remember our controller accepts
                //3 parameters name, email and message
                data: { "name": name, "email": email, "message": message },
                //create a success function
                //this method is executed if controller
                //defined by the URL is found
                //and it accepts the data sent
                //control comes to this point if the controller
                //is executed. So data in function(data)
                //contains the Json data we sent
                //from the controller
                success: function (data) {
                    //Now in the div with id result defined in
                    //index page previously we will put in the
                    //data. As you can see Json data is very 
                    //easy way of returning to ajax call because
                    //now you can simply say data(dot)variable sent
                   //and you will get the returned value.
                    $("#result").html("<ul><li>Name: " + data.nameret + "</li><li>Email: " + data.emailret+ "</li><li>Message: "+data.messageret+"</li></ul>");
                    //now close the modal dialog we opened
                    $(".dialog").dialog("close");
                },
                //control comes to this function if ajax doesn't
               //find the controller or controller doesn't accepts
               //the data sent or controller throws exception

                error: function (data) {
                    //If it happens alert user of the error
                    alert("There was error processing this");
                    //close the modal dialog
                    $(this).closest(".dialog").dialog("close");
                }
            });

        });

So this now completes our dialog. Please note that this JQuery needs to be inside $(document).ready() function.

PS: You can also add validations to this the modal form but I have not included it here. You can also send modal from dB to the Views and update those modal from result from the view. For this you will have to make changes to the controller actions defined.

Create Websites using SQL Express with ASP.NET MVC

I was trying my hand on learning ASP.NET MVC but one thing that create most problem for me was that most of the tutorials used SQL Compact (here after reffered as SQL CE). But I wanted to use SQL Express as my database server. I had to struggle a lot to find a way to make website using SQL Express and ASP.NET MVC. So I thought if I put it here it might help :)

To start with this, we first need to create a solution in VWD 2010 with MVC.

1. Create a project, choose a name for the project,  for convenience I have named it "MvcTest". Click "Ok" button.

2. Choose Internet Application and Razor as your view engine and click "Ok".

3. You will see that VWD creates different files for you automatically.

4. Now in the Model folder create a Model. You can name it Test.cs

5. In the class that is created add the columns you want to specify in the table in the database, for example here I have created “{get; set;}” property for four items, ID, Name, RollNumber and Fee. When database will be created by Entity framework of ASP.NET MVC these will represent the columns in the table that is created. The definition for table however is not included in this picture (below), that will be given in further steps.

6. Now create a context class. Name the same as TestContext. This context class will basically define the database and table for your application. For adding context class you need to refer to System.Data.Entity. After adding the context your class will basically look like below, here Tests represents your database and Test (given in DbSet<Test>) represents your table.

7. Now coming to the point where you add connection string to the webconfig file.

The connection string to use SQL CE is:

<add connectionstring="Data Source=|DataDirectory|Test.sdf" name="TestContext" providername="System.Data.SqlServerCe.4.0"/>

Courtesy : http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/creating-an-entity-framework-data-model-for-an-asp-net-mvc-application

We add this connection string to web.config file on the root of the solution.

To change the connection string to use SQLExpress we can use the following string:

<add name="TestContext" connectionString="Server=.\SQLExpress;Database=Test;Integrated Security=SSPI;User Instance=true" providerName="System.Data.SqlClient" />


Courtesy : Lot of google searches and some personal tweaks

Now once the connection string is defined in web.config file, we need to build the solution before we proceed.

8. Once you have built the solution in the controller folder try to add Test controller with the following parameters

a. Template: Controller with read/write actions and views, using Entity Framework

b. Model class: Test(MvcTest.Models)

c. Data context class: TestContext(MvcTest.Models)

d. Views: Razor (CSHTML)

9. Sometimes you will get an error saying “Unable to create dbo.Test”, if this happens I suggest adding Tests.mdf database manually to App_Data folder, you can do that by right clicking on the App_Data folder Add=>New Item=> SQL Server Database as given below:

10. Click on the add button. Now you will see magic happen. VWD will automatically create Index.cshtml, Details.cshtml, Create.cshtml, Edit.cshtml, Delete.cshtml files for you in your view directory.

11. Now you are free to use and tweak the application to your liking. As of now with this much code only you already have working application. Screen Shots for Index page, Create page, Edit page and Delete page is given below. To get to the Index page run the application from VWD using Ctrl+F5. In the address bar of Internet Explorer append “Test” to the address. eg. http://localhost:xxxx/Test

a. Index

b. Create (Click on Create New Hyperlink to get to this page)

c. Changed Index page. Once the data is created you are redirected back to Index.

d. Click on Edit, Details and Delete for viewing respective pages.

Hope this post helps you to use SQLExpress with ASP.NET MVC :)

PS: I have just started learning ASP.NET MVC, so I might have made some mistakes (which doesn’t look likely because the application is working but still) please help me to correct them.

Disclaimer: I am not the creator of ASP.NET, MVC, Razor or Entity, all I am trying to do is put up a simple tutorial in place using SQL Express and ASP.NET MVC and all my learning is from the resources collected from the internet.