Wednesday, 20 May 2015

Modal in Asp.Net MVC

Here we will learn Modal in Asp.net MVC, If we want to show the Student data from database “Student “ Table then we need to define properties of a student and need to display student information.

1.   Go to your application and right click on Modal folder and add a class to this folder then give the name of that class as Student.cs means this class contain of all the properties of a student, Now Define the  properties of Student.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication1.Models
{
    public class Student
    {
        public int StudentId { get; set; }
        public string StudentName { get; set; }
        public string Gender { get; set; }
        public string StudentSchool { get; set; }
    }
}


2.   Now Add a controller to your application for that go to solution explorer and right click on Controller and a controller and give the name for this controller As Student.
When we click on add then in this Student controller class there is a bydefault method is index , so change this method name as “studentdetail”.
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class StudentController : Controller
    {
       
        public ActionResult StudentDetail()
        {
            return View();
        }

    }
}


Here if i try to access Student.cs class , it will not be assessable because it is in “MvcApplication1.Models” namespace however this Controller class exists in “namespace MvcApplication1.Controllers” namespace. So for accessing the student.cs class add the namespace in controller class and define the value of student properties

using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class StudentController : Controller
    {
       
        public ActionResult StudentDetail()
        {
            Student _student = new Student()
            {
                StudentId = 1,
                StudentName = "munesh",
                Gender = "Male",
                StudentSchool = "VIT"
            };

            return View();
        }

    }
}



3.   Now for showing Student information to the user there is need to add a view so for that right click on StudentDetail method you will see view window from there you click on Strongly type view and from there dropdown you select you modal class means in my case it is Student, if in your dropdown you are not able to see this modal class then you need to build your application first and then you add a view, after selecting this modal class click on add.


4.   Now we want to show the student detail in a table with label so write following code.
@model MvcApplication1.Models.Student

@{
    ViewBag.Title = "StudentDetail";
}

<h2>StudentDetail</h2>

<table style="font-family:Arial">
    <tr>
        <td>
            Student ID:
        </td>
        <td>
            @Model.StudentId
        </td>
    </tr>
    <tr>
        <td>
            Student Name:
        </td>
        <td>
            @Model.StudentName
        </td>
    </tr>
    <tr>
        <td>
            Gender:
        </td>
        <td>
            @Model.Gender
        </td>
    </tr>
    <tr>
        <td>
            Student School:
        </td>
        <td>
            @Model.StudentSchool
        </td>
    </tr>
</table>


5.   Now in this condition if we Run the application and navigate to http://localhost/MvcApplication1/student/StudentDetail. We should get the output as expected.  it will give error (as null reference)  because  it is not able to find the value of student properties  , In view modal object expecting StudentDetail information but we are not passing these value so pass the student values to view in controller class,
    return View(_student);


6.   Now run your application and navigate to particular URL “http://localhost/MvcApplication1/student/StudentDetail” we will get expected result.



7.   Here if we don’t want to type this URL the  we need to change Controller name and Action  name in RouteConfig.cs File(Available in App_Start folder).
public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Student", action = "StudentDetail", id = UrlParameter.Optional }
            );
        }



No comments:

Post a Comment

Paging in html table using javascript

I demonstrated how to use HTML tables on the client for a very simple client-side paging solution. I have heard from several people who p...