European ASP.NET MVC 4 and MVC 5 Hosting

BLOG about ASP.NET MVC 3, ASP.NET MVC 4, and ASP.NET MVC 5 Hosting and Its Technology - Dedicated to European Windows Hosting Customer

European ASP.NET Core Hosting - HostForLIFE.eu :: Multiple Models in Single View in MVC

clock February 7, 2020 10:31 by author Peter

In MVC we cannot pass multiple models from a controller to the single view. This article provides a workaround for multiple models in a single view in MVC.

Problem Statement

Suppose I have two models, Teacher and Student, and I need to display a list of teachers and students within a single view. How can we do this?

The following are the model definitions for the Teacher and Student classes.

public class Teacher  
{  
    public int TeacherId { get; set; }  
    public string Code { get; set; }  
    public string Name { get; set; }  
}   
  
public class Student  
{  
    public int StudentId { get; set; }  
    public string Code { get; set; }  
    public string Name { get; set; }  
    public string EnrollmentNo { get; set; }  
}  

The following are the methods that help us to get all the teachers and students.

private List<Teacher> GetTeachers()  
{  
    List<Teacher> teachers = new List<Teacher>();  
    teachers.Add(new Teacher { TeacherId = 1, Code = "TT", Name = "Peter" });  
    teachers.Add(new Teacher { TeacherId = 2, Code = "JT", Name = "Scott" });  
    teachers.Add(new Teacher { TeacherId = 3, Code = "RT", Name = "Paul" });  
    return teachers;  
}   
  
public List<Student> GetStudents()  
{  
    List<Student> students = new List<Student>();  
    students.Add(new Student { StudentId = 1, Code = "L0001", Name = "Thomas", EnrollmentNo = "201404150001" });  
    students.Add(new Student { StudentId = 2, Code = "L0002", Name = "Brian", EnrollmentNo = "201404150002" });  
    students.Add(new Student { StudentId = 3, Code = "L0003", Name = "Chester", EnrollmentNo = "201404150003" });  
    return students;  
}  

There are many ways to use multiple models with a single view. Here I will explain ways one by one.

1. Using Dynamic Model

ExpandoObject (the System.Dynamic namespace) is a class that was added to the .Net Framework 4.0 that allows us to dynamically add and remove properties onto an object at runtime. Using this ExpandoObject, we can create a new object and can add our list of teachers and students into it as a property. We can pass this dynamically created object to the view and render list of the teacher and student.

Controller Code

public class HomeController : Controller  
{  
    public ActionResult Index()  
    {  
        ViewBag.Message = "Welcome to my demo!";  
        dynamic mymodel = new ExpandoObject();  
        mymodel.Teachers = GetTeachers();  
        mymodel.Students = GetStudents();  
        return View(mymodel);  
    }  
}  

We can define our model as dynamic (not a strongly typed model) using the @model dynamic keyword.

View Code

@using MultipleModelInOneView;  
@model dynamic  
@{  
    ViewBag.Title = "Home Page";  
}  
<h2>@ViewBag.Message</h2>  
   
<p><b>Teacher List</b></p>  
   
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
    </tr>  
    @foreach (Teacher teacher in Model.Teachers)  
    {  
        <tr>  
            <td>@teacher.TeacherId</td>  
            <td>@teacher.Code</td>  
            <td>@teacher.Name</td>  
        </tr>  
    }  
</table>  
   
<p><b>Student List</b></p>  
   
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
        <th>Enrollment No</th>  
    </tr>  
    @foreach (Student student in Model.Students)  
    {  
        <tr>  
            <td>@student.StudentId</td>  
            <td>@student.Code</td>  
            <td>@student.Name</td>  
            <td>@student.EnrollmentNo</td>  
        </tr>  
    }  
</table>  

2. Using View Model

ViewModel is nothing but a single class that may have multiple models. It contains multiple models as a property. It should not contain any method. In the above example, we have the required View model with two properties. This ViewModel is passed to the view as a model. To get intellisense in the view, we need to define a strongly typed view.

public class ViewModel  
{  
    public IEnumerable<Teacher> Teachers { get; set; }  
    public IEnumerable<Student> Students { get; set; }  
}  

Controller code

public ActionResult IndexViewModel()  
{  
    ViewBag.Message = "Welcome to my demo!";  
    ViewModel mymodel = new ViewModel();  
    mymodel.Teachers = GetTeachers();  
    mymodel.Students = GetStudents();  
    return View(mymodel);  
}  

View code

@using MultipleModelInOneView;  
@model ViewModel   
@{  
    ViewBag.Title = "Home Page";  
}  
<h2>@ViewBag.Message</h2>  
   
<p><b>Teacher List</b></p>  
   
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
    </tr>  
    @foreach (Teacher teacher in Model.Teachers)  
    {  
        <tr>  
            <td>@teacher.TeacherId</td>  
            <td>@teacher.Code</td>  
            <td>@teacher.Name</td>  
        </tr>  
    }  
</table>  
   
<p><b>Student List</b></p>  
   
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
        <th>Enrollment No</th>  
    </tr>  
    @foreach (Student student in Model.Students)  
    {  
        <tr>  
            <td>@student.StudentId</td>  
            <td>@student.Code</td>  
            <td>@student.Name</td>  
            <td>@student.EnrollmentNo</td>  
        </tr>  
    }  
</table>  

3. Using ViewData
ViewData is used to transfer data from the controller to the view. ViewData is a dictionary object that may be accessible using a string as the key. Using ViewData, we can pass any object from the controller to the view. The Type Conversion code is required when enumerating in the view.
For the preceding example, we need to create ViewData to pass a list of teachers and students from the controller to the view.

Controller Code
public
 ActionResult IndexViewData()  

{  
    ViewBag.Message = "Welcome to my demo!";  
    ViewData["Teachers"] = GetTeachers();  
    ViewData["Students"] = GetStudents();  
    return View();  
}  

View Code

@using MultipleModelInOneView;  
@{  
    ViewBag.Title = "Home Page";  
}  
<h2>@ViewBag.Message</h2>  
 <p><b>Teacher List</b></p>   
@{  
  
   IEnumerable<Teacher> teachers = ViewData["Teachers"] as IEnumerable<Teacher>;  
   IEnumerable<Student> students = ViewData["Students"] as IEnumerable<Student>;  
}  
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
    </tr>  
    @foreach (Teacher teacher in teachers)  
    {  
        <tr>  
            <td>@teacher.TeacherId</td>  
            <td>@teacher.Code</td>  
            <td>@teacher.Name</td>  
        </tr>  
    }  
</table>  
 <p><b>Student List</b></p>  
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
        <th>Enrollment No</th>  
    </tr>  
    @foreach (Student student in students)  
    {  
        <tr>  
            <td>@student.StudentId</td>  
            <td>@student.Code</td>  
            <td>@student.Name</td>  
            <td>@student.EnrollmentNo</td>  
        </tr>  
    }  
</table>  

4. Using ViewBag
ViewBag is similar to ViewData and is also used to transfer data from the controller to the view. ViewBag is a dynamic property. ViewBag is just a wrapper around the ViewData.

Controller Code

public ActionResult IndexViewBag()  
{  
    ViewBag.Message = "Welcome to my demo!";  
    ViewBag.Teachers = GetTeachers();  
    ViewBag.Students = GetStudents();  
    return View();  
}  

View Code

@using MultipleModelInOneView;  
@{  
    ViewBag.Title = "Home Page";  
}  
<h2>@ViewBag.Message</h2>  
   
<p><b>Teacher List</b></p>  
   
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
    </tr>  
    @foreach (Teacher teacher in ViewBag.Teachers)  
    {  
        <tr>  
            <td>@teacher.TeacherId</td>  
            <td>@teacher.Code</td>  
            <td>@teacher.Name</td>  
        </tr>  
    }  
</table>  
   
<p><b>Student List</b></p>  
   
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
        <th>Enrollment No</th>  
    </tr>  
    @foreach (Student student in ViewBag.Students)  
    {  
        <tr>  
            <td>@student.StudentId</td>  
            <td>@student.Code</td>  
            <td>@student.Name</td>  
            <td>@student.EnrollmentNo</td>  
        </tr>  
    }  
</table> 

5. Using Tuple

A Tuple object is an immutable, fixed-size and ordered sequence object. It is a data structure that has a specific number and sequence of elements. The .NET framework supports tuples up to seven elements. Using this tuple object we can pass multiple models from the controller to the view.

Controller Code

public ActionResult IndexTuple() 
{  
    ViewBag.Message = "Welcome to my demo!";  
    var tupleModel = new Tuple<List<Teacher>, List<Student>>(GetTeachers(), GetStudents());  
    return View(tupleModel);  
}  

View Code

@using MultipleModelInOneView;  
@model Tuple <List<Teacher>, List <Student>>  
@{  
    ViewBag.Title = "Home Page";  
}  
<h2>@ViewBag.Message</h2>   
<p><b>Teacher List</b></p>  
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
    </tr>  
    @foreach (Teacher teacher in Model.Item1)  
    {  
        <tr>  
            <td>@teacher.TeacherId</td>  
            <td>@teacher.Code</td>  
            <td>@teacher.Name</td>  
        </tr>  
    }  
</table>  
<p><b>Student List</b></p>  
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
        <th>Enrollment No</th>  
    </tr>  
    @foreach (Student student in Model.Item2)  
    {  
        <tr>  
            <td>@student.StudentId</td>  
            <td>@student.Code</td>  
            <td>@student.Name</td>  
            <td>@student.EnrollmentNo</td>  
        </tr>  
    }  
</table>  

6. Using Render Action Method
A Partial View defines or renders a partial view within a view. We can render some part of a view by calling a controller action method using the Html.RenderAction method. The RenderAction method is very useful when we want to display data in the partial view. The disadvantages of this method is that there are only multiple calls of the controller.


In the following example, I have created a view (named partialView.cshtml) and within this view I called the html.RenderAction method to render the teacher and student list.

Controller Code

public ActionResult PartialView()  
{  
    ViewBag.Message = "Welcome to my demo!";  
    return View();  
}  
   
/// <summary>  
/// Render Teacher List  
/// </summary>  
/// <returns></returns>  
public PartialViewResult RenderTeacher()  
{  
    return PartialView(GetTeachers());  
}  
   
/// <summary>  
/// Render Student List  
/// </summary>  
/// <returns></returns>  
public PartialViewResult RenderStudent()  
{  
    return PartialView(GetStudents());  
 

View Code

@{ 
   ViewBag.Title = "PartialView";  
<h2>@ViewBag.Message</h2>  
<div>  
    @{  
        Html.RenderAction("RenderTeacher");  
        Html.RenderAction("RenderStudent");  
    }  
</div>  

RenderTeacher.cshtml

@using MultipleModelInOneView;  
@model IEnumerable<MultipleModelInOneView.Teacher>  
 <p><b>Teacher List</b></p>  
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
    </tr>  
    @foreach (Teacher teacher in Model)  
    {  
        <tr>  
            <td>@teacher.TeacherId</td>  
            <td>@teacher.Code</td>  
            <td>@teacher.Name</td>  
        </tr>  
    }  
  1. </table>  

RenderStudent.cshtml

@using MultipleModelInOneView;  
@model IEnumerable<MultipleModelInOneView.Student>   
  
<p><b>Student List</b></p>  
<table>  
    <tr>  
        <th>Id</th>  
        <th>Code</th>  
        <th>Name</th>  
        <th>Enrollment No</th>  
    </tr>  
    @foreach (Student student in Model)  
    {  
        <tr>  
            <td>@student.StudentId</td>  
            <td>@student.Code</td>  
            <td>@student.Name</td>  
            <td>@student.EnrollmentNo</td>  
        </tr>  
    }  
</table> 

Conclusion

This article helps us to learn how to pass multiple models from the controller to the view. I hope this will be helpful for beginners.



ASP.NET MVC Hosting - HostForLIFE.eu :: Display Mode Provider in MVC 5 Application

clock January 22, 2020 10:19 by author Peter

This article will solve a problem. Display modes in ASP.NET MVC 5 provide a way of separating page content from the way it is rendered on various devices, like web, mobile, iPhone, iPod and Windows Phones. All you need to do is to define a display mode for each device, or class of devices.

First you create a model and context class. We create an Employee class that has the following properties like.
    public class Employee 
    { 
        public Guid ID { get; set; } 
        [Display(Name="First Name")] 
        public string FirstName { get; set; } 
        [Display(Name = "Last Name")] 
        public string LastName { get; set; } 
        [Display(Name = "Department")] 
        public string Department { get; set; } 
        [Display(Name = "Salary")] 
        public double Salary { get; set; } 
        [Display(Name = "Address")] 
        public string Address { get; set; } 
    }


And second is the context class like this that inherits the DbContext class.
    public class DBConnectionContext:DbContext 
    {         
       public DBConnectionContext(): base("name=dbContext") 
       { 
             Database.SetInitializer(new DropCreateDatabaseIfModelChanges 
             <DBConnectionContext>()); 
       } 
            public DbSet<Employee> Employees { get; set; } 
    }


If you want to recreate data every time the model changes, add these lines of code.
    Database.SetInitializer(new DropCreateDatabaseIfModelChanges<DbConnectionContext>());

You also have a web config file. We configure connectionStrings in the Web.Config file.
    <connectionStrings> 
    <add name="dbContext" connectionString="Data Source=localhost; Initial Catalog=CommonDataBase; Integrated Security=true"  
          providerName="System.Data.SqlClient" /> 
     </connectionStrings>


Then you create a controller class in a controller folder and edit the name as HomeController. Add a Scaffold to select a MVC 5 Controller with Views, using Entity Framework.

DisplayModes

DisplayModes give you another level of flexibility on top of the default capabilities we saw in the last section. DisplayModes can also be used along with the previous feature so we will simply build off of the site we just created. Let's say we wanted to show an alternate view for the Windows Phone 8, iPhone, iPod or Android.

Windows Phone 8 DisplayMode

Now that you have made the override files, you can use a DisplayMode to show them for the appropriate phones.

The best time to set this up is when the application starts. Here is our global.asax.cs, with the DisplayMode setup.
    DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("WP") 
    { 
        ContextCondition = (ctx => ctx.GetOverriddenUserAgent() 
        .IndexOf("Windows Phone OS", StringComparison.OrdinalIgnoreCase) > 0)   
     }); 
      
    DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("iPhone") 
    { 
        ContextCondition = (ctx => ctx.GetOverriddenUserAgent() 
        .IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) > 0)   
    }); 
      
    DisplayModeProvider.Instance.Modes.Insert(1, new DefaultDisplayMode("Android") 
    { 
        ContextCondition = (ctx => ctx.GetOverriddenUserAgent() 
        .IndexOf("Android", StringComparison.OrdinalIgnoreCase) > 0)   
    }); 

The DisplayModeProvider Class
DisplayModeProvider holds a list of DefaultDisplayMode obejects, each representing display mode. And the provider holds the two display modes, default and mobile. The default display mode in an empty string and the second holds the mobile string.


We just create multiple View with [View].Android.cshtml, [View].iPhone.cshtml and so on for every device such as:

We create an index for iPhone and create a new employee in iPhone Index.iPhone.cshtml and Create.iPhone.cshtml.


We create an index for Windows Phone and create a new employee in the Windows Phone Index.WP.cshtml Create.WP.cshtml.


We create an index for Android and create a new employee in Windows Phone Index.Android.cshtml Create.Android.cshtml.



ASP.NET MVC Hosting - HostForLIFE.eu :: Prepare a Custom JSON Format in MVC or Remove JSON Key

clock January 9, 2020 11:15 by author Peter

This post explains how to remove a JSON key in JSON result in MVC or C#

We can create our own converter class:
    public class JsonKeysConverter : JsonConverter 
    { 
        public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer) 
        { 
            Module o = (Module)value; 
            JObject newObject = new JObject(new JProperty(o.Name, o.Permission)); 
            newObject.WriteTo(writer); 
        } 
     
        public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer) 
        { 
            throw new NotImplementedException("The type will skip the converter."); 
        } 
     
        public override bool CanRead 
        { 
            get { return false; } 
        } 
     
        public override bool CanConvert(Type objectType) 
        { 
            return true; 
        } 
    } 
     
    [JsonConverter(typeof(JsonKeysConverter))] 
    public class Module 
    { 
        public string Name { get; set; } 
        public string[] Permission { get; set; } 
    } 
     
    public class Role 
    { 
        public class Roles 
        { 
            public Dictionary<string, List<string>> Modules {get; set;} 
        } 
    } 
     
    public static string json() 
    { 
            var oRoles = new Roles(); 
            oRoles.modules = new Module[] { 
                new Module(){ 
                    Name="Page-Profile", 
                    Permission=new string[]{ "Edit","View","Delete"} 
                }, 
                new Module(){ 
                    Name="User", 
                    Permission=new string[]{ "Edit","View","Delete","Update"} 
                } 
            }; 
            var json = Newtonsoft.Json.JsonConvert.SerializeObject(oRoles); 
         
                     
            Dictionary<string, List<string>> modules = new Dictionary<string, List<string>>(); 
            modules.Add("Page-Profile", new List<string>() { "Edit", "View", "Delete"}); 
            modules.Add("User", new List<string>() { "Edit", "View", "Delete", "Update"}); 
             
            return JsonConvert.SerializeObject(modules);  


Output
{"Page-Profile":["Edit","View","Delete"],"User":["Edit","View","Delete","Update"]}  



ASP.NET MVC Hosting - HostForLIFE.eu :: How to Use Google Calendar API?

clock December 6, 2019 11:27 by author Peter

In this article I will show you how to use Google Calendar in ASP.NET MVC. Google APIs use the OAuth 2.0 protocol for authentication and authorization. Google supports common OAuth 2.0 scenarios such as those for web server, installed, and client-side applications.It's more easily to log in your application via OAuth and OpenID provider in  ASP.NET MVC 4 now. Microsoft has few build-in client for Microsoft, Twitter, Facebook, Google. The Google client is based on OpenID and not OAuth. That's mean you can not access Google Data API.

In order to access Google Data API for web application. You need to register a Client ID to get Client ID an Client Secret for setting in your application.

You need to assign redirect URIs for grap OAuth access token callback also. Here we setup Rirect URIs as http://localhost:57271/Account/ExternalLoginCallback.

Google Client Library for .NET

The Google APIs Client Library for .NET is generic .NET runtime client for Google Services. The library supports OAuth2.0 authentication, and is able to generate strongly typed client libraries for Discovery-based services. Google Client library is a higher level library for using Google Data API. You can download beta version from Nuget in visual studio. It's more difficult to handle Google Client Library for .NET with few documents and sample now. Here, just using Google.Apis.Calendar.v3.Data namespace to our strong type class for data binding in deserialize object from API response.

    private Event GoogleEventHandle(string token, string method, string requestURL, string requestBody = null)
        {
            var jsonSerializer = new JavaScriptSerializer();
            var request = WebRequest.Create(requestURL) as HttpWebRequest;
            request.KeepAlive = true;
            request.ContentType = "application/json";
            request.Method = method;
            request.Headers.Add("Authorization", "Bearer " + token);

            if(requestBody != null)
            {
                Stream ws = request.GetRequestStream();
                using (var streamWriter = new StreamWriter(ws, new UTF8Encoding(false)))
                {
                    streamWriter.Write(requestBody);
                }
            }

            var response = request.GetResponse();
            var stream = new StreamReader(response.GetResponseStream());

            var googleEvent = Newtonsoft.Json.JsonConvert.DeserializeObject(stream.ReadToEnd().Trim());

            return googleEvent; 
        }

        private Event CreateGoogleEvent(string token, string calendarId, string requestBody)
        {
            var requestURL = string.Format("https://www.googleapis.com/calendar/v3/calendars/{0}/events", calendarId);
            return GoogleEventHandle(token, "POST", requestURL, requestBody);             
        }

Above is methods how we are accessing Google Calendar v3 API via webrequest. Now, we are be able to access Google Calendar API via OAuth. Nest step, we will create a simple CRUD UI by AngularJS.


HostForLIFE.eu ASP.NET MVC Hosting
HostForLIFE.eu revolutionized hosting with Plesk Control Panel, a Web-based interface that provides customers with 24x7 access to their server and site configuration tools. Plesk completes requests in seconds. It is included free with each hosting account. Renowned for its comprehensive functionality - beyond other hosting control panels - and ease of use, Plesk Control Panel is available only to HostForLIFE's customers. They
offer a highly redundant, carrier-class architecture, designed around the needs of shared hosting customers.



ASP.NET MVC Hosting - HostForLIFE.eu :: ASP.NET MVC 5 Create Shared Razor Layout And ViewStart

clock October 25, 2019 09:18 by author Peter

In article, I have shared a way to create a Layout Razor and ViewStart in ASP.NET MVC 5.
 
Views/Shared
You need to create a shared folder, "Shared" in the Views directory.
 
Go Views/Shared directory and create new _LayoutPage1.cshtml file and write the following below code.
    <!DOCTYPE html> 
     
    <html> 
    <head> 
        <meta name="viewport" content="width=device-width" /> 
        <title>@ViewBag.Title</title> 
    </head> 
    <body> 
        <div> 
            @RenderBody() 
        </div> 
    </body> 
    </html> 


The @RenderBody()
Use display content in multiple controllers to View.

Example you can have a fixed header and footer in the page. Only change will be the content of the RenderBody() called in the code.
    <html> 
    <head> 
        <meta name="viewport" content="width=device-width" /> 
        <title>@ViewBag.Title</title> 
    </head> 
    <body> 
        <div class="header"> 
            <!--code header fixed--> 
        </div> 
        <div> 
            @RenderBody() 
        </div> 
        <div class="footer"> 
            <!--code footer fixed--> 
        </div> 
    </body> 
    </html> 


So you have fixed the (header/footer) for the website.
 
Okay, you need using _LayoutPage1.cshtml, so you to Views/Home/index.cshtml. Open it, pass the following below code.
    @{ 
        ViewBag.Title = "Index"; 
        Layout = "~/Views/Shared/_LayoutPage1.cshtml"; 
    } 


_ViewStart.cshtml used to define the layout for the website. You can set the layout settings as well, if HomeController is using Layout.
 
_LayoutHome.cshtml or AdminController is _LayoutAdmin.cshtml
    //Views/ViewStart.cshtml 
    @{ 
        Layout = "~/Views/Shared/_LayoutPage1.cshtml"; 
    } 


You can configuration _ViewStart.cshtml the following below code.
    @{ 
     
        string CurrentName = Convert.ToString(HttpContext.Current.Request.RequestContext.RouteData.Values["Controller"]); 
        string clayout = ""; 
        switch (CurrentName) 
        { 
            case "Home": 
                clayout = "~/Views/Shared/_LayoutHome.cshtml"; 
                break; 
            default: 
                //Admin layout   
                clayout = "~/Views/Shared/_LayoutAdmin.cshtml"; 
                break; 
        } 
        Layout = clayout; 
     
    } 

This gives you an idea, how to use a Razor layout in various pages.

 



ASP.NET MVC Hosting - HostForLIFE.eu :: Preventing Cross Site Request Forgery In MVC

clock September 26, 2019 11:14 by author Peter

What is Cross-Site Request Forgery
Cross-Site Request Forgery (CSRF) is a process in which a user first signs on to a genuine website (e.g. facebook.com) and after successful login, the user opens another website (malicious website) in the same browser.
 
Both websites are opened in the same browser. Malicious website will display some links to the user and asks the user to click on those links. User clicks on the links displayed on a malicious website, the malicious website sends a request using the existing session of genuine website. Web server of genuine website treats this request as a valid request and assumes that it is coming from a valid user so it executes the request and provides a proper response. A malicious website can perform harmful operations on genuine website.
 
In order to solve this problem, we expect the Action Method of genuine website to recognize the source of the request, whether the request is coming from genuine website or from a malicious website. This can be achieved by using the [ValidateAntiForgeryToken] attribute in ASP.Net MVC.
 
How to Implement CSRF Security in MVC
In order to implement CSRF security in MVC, first, we need to use HTML helper @Html.AntiForgeryToken() in view. It should be placed inside the BeginForm() method in view.
 
Next, we need to add [ValidateAntiForgeryToken] attribute on the action method which will accept HTTP post request. We need to do only these 2 changes and now MVC will prevent CSRF attacks.
 
How ValidateAntiForgeryToken works
How ValidateAntiForgeryToken prevents CSRF attacks?


First, the user will open genuine website in the browser. User login to genuine website. After login, genuine website sends Authentication cookie and Verification token. Verification token has randomly generated alphanumeric values. The verification token is stored in the cookie as well as in hidden field on client-side. When HTML form is submitted to the server, the verification token is submitted as a cookie as well as a hidden field. On the server-side, both are checked if they are same or not? If both are same then request is valid. If they are different or one of them is missing then request is treated as invalid request and will be rejected automatically by MVC.
 
When a user opens a malicious website in a new tab of the same browser, the malicious website will display some links and ask the user to click on those links. This website already has a script to send the request to genuine website. When the user clicks on links, the malicious website sends a request to genuine website. Since request is being sent to genuine website, the browser automatically submits Authentication cookie to Action method of genuine website but here, the hidden field is missing. The Action method has [ValidateAntiForgeryToken] attribute so it checks whether Authentication cookie and hidden field has same value but here, the hidden field is missing so the request is treated as invalid and it is rejected by MVC.
 
Practical Implementation
Wherever you have a Form, use @Html.AntiForgeryToken() inside the form and action method for accepting the HTTP Post should have ValidateAntiForgeryToken attribute. These are the only change, the rest of the process will be taken care of by ASP.Net MVC.
 
Please see the below HTML view where I have added@Html.AntiForgeryToken()
    @using (Html.BeginForm("Create", "Products", FormMethod.Post, new { enctype = "multipart/form-data" })) 
    { 
       @Html.AntiForgeryToken() 
       <div class="form-row"> 
       <div class="form-group col-md-6"> 
          @Html.LabelFor(temp => temp.ProductName) 
          @Html.TextBoxFor(temp => temp.ProductName, new { placeholder = "Product Name", @class = "form-control" }) 
          @Html.ValidationMessageFor(temp => temp.ProductName) 
       </div> 
    <div class="form-group col-md-6"> 
       @Html.LabelFor(temp=>temp.Price) 
       @Html.TextBoxFor(temp=>temp.Price,new { @class="form-control",placeholder="Price"}) 
    </div> 
    </div> 
    @Html.ValidationSummary() 
       <button type="submit" class="btn btn-success">Create</button> 
       <a class="btn btn-danger" href="/products/index">Cancel</a> 
    } 

Below is the action method where I have added [ValidateAntiForgeryToken] attribute.
    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Create(Product p) 
       { 
       ProductDBContext db = new ProductDBContext(); 
       if (ModelState.IsValid) 
       { 
          db.Products.Add(p); 
          db.SaveChanges(); 
          return RedirectToAction("Index"); 
       } 
       else 
       { 
          return View(); 
    } 
    } 

Summary
In this blog, I have explained Cross-Site Request Forgery(CSRF), its steps and what changes we need to do in MVC application to prevent CSRF attacks.



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: How To Use jQuery To Consolidate AutoComplete Function

clock September 13, 2019 11:51 by author Peter

jQuery UI has an AutoComplete widget. The AutoComplete widget is quite nice and straight forward to use. In this post, I will show you how to use jQuery AutoComplete widget to consolidate AutoComplete function in ASP.NET MVC application.

Step 1

The first step is to add the jQuery scripts and styles. With ASP.NET MVC, the following code does the work:

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")   
@Scripts.Render("~/bundles/jqueryui")

Step 2

Using the AutoComplete widget is also simple. You will have to add a textbox and attach the AutoComplete widget to the textbox. The only parameter that is required for the widget to function is source. For this example, we will get the data for the AutoComplete functionality from a MVC action method.

$(document).ready(function () {
    $('#tags').autocomplete(
        {
            source: '@Url.Action("TagSearch", "Home")'
    });
})

In the above code, the textbox with id=tags is attached with the AutoComplete widget. The source points to the URL of TagSearch action in the HomeController: /Home/TagSearch. The HTML of the textbox is below:

<input type="text" id="tags" />


Step 3

When the user types some text in the textbox, the action method (TagSearch) is called with a parameter in the request body. The parameter name is term. So, your action method should have the following signature:

public ActionResult TagSearch(string term)
{
    // Get Tags from database
    string[] tags = { "ASP.NET", "WebForms",
                    "MVC", "jQuery", "ActionResult",
                    "MangoDB", "Java", "Windows" };
    return this.Json(tags.Where(t => t.StartsWith(term)),
                    JsonRequestBehavior.AllowGet);
}

Now, the AutoComplete functionality is complete!

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

 



ASP.NET MVC Hosting - HostForLIFE.eu :: Dynamic am-Charts In ASP.NET MVC

clock July 30, 2019 12:17 by author Peter

Here, we will learn about creating dynamic am-charts in ASP.NET MVC 5. Charts are very useful for seeing how much work is done in any place in a short period of time.

Prerequisites

  • Basic knowledge of jQuery.
  • Data from which we can generate the charts.

Create a new project in ASP.NET MVC
We are going to use the following jQuery libraries provided by amCharts.
<script src="https://www.amcharts.com/lib/4/core.js"></script>    
<script src="https://www.amcharts.com/lib/4/charts.js"></script>     
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>    
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> 
    

We are going to use the dummy API for the chart data.
https://api.myjson.com/bins/zg8of

Open the View -> Home -> Index.cshtml and write the code for generating the chart.
@{    
ViewBag.Title = "AM Chart Demo";    
}    

<div id="chartData"></div>    

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

<script src="https://www.amcharts.com/lib/4/core.js"></script>    
<script src="https://www.amcharts.com/lib/4/charts.js"></script>    
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>    
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>    

<script>    
$(document).ready(function () {    
$.ajax({    
    url: 'https://api.myjson.com/bins/zg8of',    
    method: 'GET', success: function (data) {    
        generateChart(data);    
    }, error: function (err) {    
        alert("Unable to display chart. Something went wrong.");    
    }    
});    

function generateChart(data, iteration = 0) {    
    var dates = [];    
    var newData = [];    
    var gr = [];    

    function groupBy(array, f) {    
        var groups = {};    
        array.forEach(function (o) {    
            var group = JSON.stringify(f(o));    
            groups[group] = groups[group] || [];    
            groups[group].push(o);    
        });    
        return Object.keys(groups).map(function (group) {    
            return groups[group];    
        })    
    }    
    var result = groupBy(data, function (item) {    
        return ([item.Name]);    
    });    
    $.each(result, function (a, b) {    
        var d1 = b.map(function (i) {    
            return i.Month;    
        });    
        $.extend(true, dates, d1);    
    });    
    $.each(dates, function (a, b) {    
        var item = {    
            sales_figure: b    
        };    
        $.each(result, function (i, c) {    
            el = c.filter(function (e) {    
                return e.Month == b;    
            });    
            if (el && el.length > 0) {    
                item[c[i].Name.toUpperCase()] = el[0].Sales_Figure;    
                if (gr.filter(function (g) {    
                    return g == c[i].Name.toUpperCase();    
                }).length <= 0) {    
                    gr.push(c[i].Name.toUpperCase());    
                }    
            }    
        });    
        if (Object.keys(item).length > 1) newData.push(item);    
    });    
    $chartData = $('#chartData');    
    var am_el = $('<div id="dc-' + iteration + '" class="col-md-12 col-xs-12 card-item">');    
    am_el.append($('<div class="lgnd col-md-12 col-xs-12 bb2"><div id="l-' + iteration + '" class="col-md-12 col-xs-12"></div></div>'));    
    am_el.append($('<div id="c-' + iteration + '" class="col-md-12 col-xs-12" style="min-height:250px ; margin-left: -8px;">'));    
    $chartData.html(am_el);    
    var chart = am4core.create("c-" + iteration, am4charts.XYChart);    
    am4core.options.minPolylineStep = Math.ceil(newData.length / 50);    
    am4core.options.commercialLicense = true;    
    am4core.animationDuration = 0;    
    chart.data = newData;    
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());    
    categoryAxis.dataFields.category = "sales_figure";    
    categoryAxis.renderer.minGridDistance = 70;    
    categoryAxis.fontSize = 12;    
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());    
    valueAxis.fontSize = 12;    
    valueAxis.title.text = "Sales Figure";    
    chart.legend = new am4charts.Legend();    
    chart.legend.position = "top";    
    chart.legend.fontSize = 12;    
    var markerTemplate = chart.legend.markers.template;    
    markerTemplate.width = 10;    
    markerTemplate.height = 10;    
    var legendContainer = am4core.create("l-" + iteration, am4core.Container);    
    legendContainer.width = am4core.percent(100);    
    chart.legend.parent = legendContainer;    
    var legendDiv = document.getElementById("l-" + iteration);    

    function resizeLegendDiv() {    
        legendDiv.style.height = chart.legend.measuredHeight + "px";    
        legendDiv.style.overflow = "hidden";    
    }    
    chart.legend.events.on('inited', resizeLegendDiv);    
    chart.colors.list = [am4core.color("#0D8ECF"), am4core.color("#FF6600"), am4core.color("#FCD202"), am4core.color("#B0DE09"), am4core.color("#2A0CD0"), am4core.color("#CD0D74"), am4core.color("#CC0000"), am4core.color("#00CC00"), am4core.color('#ffd8b1'), am4core.color("#990000"), am4core.color('#4363d8'), am4core.color('#e6194b'), am4core.color('#3cb44b'), am4core.color('#ffe119'), am4core.color('#f58231'), am4core.color('#911eb4'), am4core.color('#46f0f0'), am4core.color('#f032e6'), am4core.color('#bcf60c'), am4core.color('#fabebe'), am4core.color('#008080'), am4core.color('#e6beff'), am4core.color('#9a6324'), am4core.color('#fffac8'), am4core.color('#800000'), am4core.color('#aaffc3'), am4core.color('#808000'), am4core.color('#ffd8b1'), am4core.color('#000075')] $.each(gr, function (l, d) {    
        var series = chart.series.push(new am4charts.LineSeries());    
        series.dataFields.valueY = d;    
        series.name = d;    
        series.dataFields.categoryX = "sales_figure";    
        series.tooltipText = "{name}: [bold]{valueY}[/]";    
        series.strokeWidth = 2;    
        series.minBulletDistance = 30;    
        series.tensionX = 0.7;    
        series.legendSettings.labelText = "[bold]" + "{name}";    
        var bullet = series.bullets.push(new am4charts.CircleBullet());    
        bullet.circle.strokeWidth = 2;    
        bullet.circle.radius = 3;    
        bullet.circle.fill = am4core.color("#fff");    
        var bulletbullethover = bullet.states.create("hover");    
        bullethover.properties.scale = 1.2;    
        chart.cursor = new am4charts.XYCursor();    
        chart.cursor.behavior = "panXY";    
        chart.cursor.snapToSeries = series;    
    });    
    chart.scrollbarX = new am4core.Scrollbar();    
    chartchart.scrollbarX.parent = chart.bottomAxesContainer;    
}    

});    
</script>  
 

Output

 

 



ASP.NET MVC Hosting - HostForLIFE.eu :: Install MVC 4 in Visual Studio 2010

clock June 28, 2019 09:43 by author Peter

We can develop MVC applications in Visual Studio 2010. Visual Studio 2010 includes MVC 2 by default. We can also install both MVC 3 and MVC 4 in Visual Studio 2010. In this article, I go through step-by-step how to install MVC 4 in Visual Studio 2010.

ASP.NET MVC 4 includes all features of MVC 3 and also includes the following:

  • The ASP.NET Web API is a framework for building and consuming HTTP services that can reach a broad range of clients, including browsers, phones, and tablets. The ASP.NET Web API is great for building services that follow the REST architectural style, plus it supports RPC patterns.
  • ASP.NET Web Pages and the new Razor syntax provide a fast, approachable, and lightweight way to combine server code with HTML to create dynamic web content.
  • Web Optimization is a framework for bundling and minifying scripts and CSS files.
  • NuGet, a free, open source developer focused package management system for the .NET platform is intended to simplify the process of incorporating third-party libraries into a .NET application during development.

Step 1: Download and Install Visual Studio 2010 Service Pack 1

Visual Studio 2010 SP1 is required to use MVC 4 in Visual Studio 2010 so we need to install it on our machine then install MVC 4. We can download it from the Microsoft Download Center and go through the following link.
http://www.microsoft.com/en-in/download/details.aspx?id=23691

We download the "VS10sp1-KB983509.exe" file and click on it and follow the steps as given in the process. But it is a web platform install so we need an internet connection to install VS SP1. If we want to install VS SP1 without an internet connection then we need to download the ISO file of VS SP 1. We can download the ISO file for VS SP1 from the same link under Install Instructions. Its size is 1.48 GB (1,590,734,349 bytes).


After installation of VS 2010 SP 1 we wil proceed to install MVC 4.

Step 2: Download MVC 4
We can download MVC 4 from the Microsoft Download Center and go through the following link:
http://www.microsoft.com/en-us/download/details.aspx?id=30683


Click on the "Download" button and the download will start within 30 seconds.

Step 3: Run MVC 4
Now we have the MVC 4 set up file ("AspNetMVC4Setup.exe") to install MVC 4. Double-click on it and it runs.

Accept the License Agreement and click on "Install".

The screen above takes several minutes so don't click on cancel or close window. After a successful installation, we get a success message on the installation screen.


Step 4: Check whether the install was successful
Now we will create a new project from Visual Studio 2010.
Go to "File" -> "New" -> "Project...".

We are notified that the MVC 4 template is ready to be used in Visual Studio 2010 so MVC 4 is successfully installed and ready to use.



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: HTTP Verbs In MVC 5

clock June 18, 2019 12:12 by author Peter

In this article, I will explain the concept of HTTP verbs in MVC 5. I will also explain the various types of HTTP verbs in MVC 5 and how it works in the project.

What is HTTP?

  • HTTP stands for hypertext transfer protocol.
  • This protocol works while working with a client-server application.
  • This protocol provides communication between the client and the server.

HTTP provides methods (verbs) for the actions performed on a response. HTTP verbs are used on an action method. HTTP provides the following main verbs.

  • Get
  • Post
  • Put
  • Delete

HTTP Get
This verb is used to get existing data from the database. In HttpGet, data travels in the URL only. To use the HttpGet method, we use HttpGet attribute on the Action method. It is also the default HTTP verb.

Example
domain.com/student/GetStudent/1
domain.com/student/GetStudent?studentid=1


[HttpGet] 
public object GetStudent(int studentid) 

   // code here 


HTTP Post

This verb is used while we have to create a new resource in the database. In HttpPost, data travels in the URL and body. To use HttpPost method, we use HttpPost attribute on the Action method.

Example
domain/student/Studentsave


Body - Json body
[HttpPost] 
public object Studentsave(studentclass obj) 



HTTP Put

This verb is used while we have to update an existing resource in the database. In HttpPut, the data travels in the URL and body. To use HttpPut method, we use HttpPut attribute on the Action method.

Example
domain.com/student/studentupdate/1

Body- Json body
[HttpPut] 
public object Studentupdate(int studentid ,Studentclass objVM) 



HTTP Delete
This verb is used while we have to delete the existing resources in the database. In HttpDelete, data travels in the URL and body. To use HttpDelete, we use HttpDelete attribute on the Action method.

Example

domain.com/student/studentdelete/1

[HttpDelete]   
public object Studentupdate(int studentid)   
{   
}  
HostForLIFE.eu ASP.NET MVC 6 Hosting
European best, cheap and reliable ASP.NET hosting with instant activation. HostForLIFE.eu is #1 Recommended Windows and ASP.NET hosting in European Continent. With 99.99% Uptime Guaranteed of Relibility, Stability and Performace. HostForLIFE.eu security team is constantly monitoring the entire network for unusual behaviour. We deliver hosting solution including Shared hosting, Cloud hosting, Reseller hosting, Dedicated Servers, and IT as Service for companies of all size.

 

 



About HostForLIFE.eu

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2016 Hosting, ASP.NET Core 2.2.1 Hosting, ASP.NET MVC 6 Hosting and SQL 2017 Hosting.


Tag cloud

Sign in