I want to show Components in a tabs , so first of all create few components. In this project we have three components, First View Component public class AllViewComponent : ViewComponent { private readonly UserManager<ApplicationUser> _userManager; public AllViewComponent(UserManager<ApplicationUser> userManager) { _userManager = userManager; } public async Task<IViewComponentResult> InvokeAsync() { List<StudentViewModel> allUsers = new List<StudentViewModel>(); var items = await _userManager.Users.ToListAsync(); foreach (var item in items) { allUsers.Add(new StudentViewModel {Id=item.Id, EnrollmentNo = item.EnrollmentNo, FatherName = item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email }); }
In MVC4 application with Visual Studio 2013, we have added a student controller with its default CRUD actions/views including list, create, edit and details. In this article we will add an empty controller and create a new action with its associated view (having a form in it).
On the controller folder right click and add a new controller. After clicking on Add an Add Controller window will open opting some options shown in the following image:
The first input is the name of controller, write Empty and in the Template option select Empty MVC
Controller and click on “Add”. It will add a new empty controller with a single action i.e. Index having a single line of code, delete this code and create a new action with that single line of code as shown:
public class EmptyController : Controller
{
public ActionResult GetValues()
{
return View();
}
}
Right click on GetValues text and select Add View option, it will show an Add View window with some of the options to be selected by the programmer. Just select only master file if not selected and leave all remaining options as they are. Those options are not usable now, we will discuss them later.
Click on Add and a view having a piece of code containing title message, layout and a header text also. Leave that code and write the following code in that view:
@using (Html.BeginForm())
{
<div>
<div>Name: </div>
<div>
@Html.TextBox("username")
</div>
</div>
}
This code will create a single textbox having the id "username" that will be used to access the value entered in this textbox. There is no button on this form to submit the value of this textbox that will be created in next article. As I have discussed earlier that an action have two types HttpGet and HttpPost. So the above action GetValues is an HttpGet type of method because of single returning view code.
The post method is used to get the inputted values of this view and use them for further process. Through this get method programmer can also send some value to the view just like the title of the view. The title of the view is GetValues as written on the first line of the .cshtml code. Programmer can easily change this title by either sending the title by the Get view or by simple edit this line of code. Now run this MVC application and write http://localhost:portNo/Empty/GetValues in the address bar of the browser and press enter.
Now we will create a submit button on this view and access the value of this textbox in the HttpPost method of the same action in further article.
On the controller folder right click and add a new controller. After clicking on Add an Add Controller window will open opting some options shown in the following image:
The first input is the name of controller, write Empty and in the Template option select Empty MVC
Controller and click on “Add”. It will add a new empty controller with a single action i.e. Index having a single line of code, delete this code and create a new action with that single line of code as shown:
public class EmptyController : Controller
{
public ActionResult GetValues()
{
return View();
}
}
Right click on GetValues text and select Add View option, it will show an Add View window with some of the options to be selected by the programmer. Just select only master file if not selected and leave all remaining options as they are. Those options are not usable now, we will discuss them later.
Click on Add and a view having a piece of code containing title message, layout and a header text also. Leave that code and write the following code in that view:
@using (Html.BeginForm())
{
<div>
<div>Name: </div>
<div>
@Html.TextBox("username")
</div>
</div>
}
This code will create a single textbox having the id "username" that will be used to access the value entered in this textbox. There is no button on this form to submit the value of this textbox that will be created in next article. As I have discussed earlier that an action have two types HttpGet and HttpPost. So the above action GetValues is an HttpGet type of method because of single returning view code.
The post method is used to get the inputted values of this view and use them for further process. Through this get method programmer can also send some value to the view just like the title of the view. The title of the view is GetValues as written on the first line of the .cshtml code. Programmer can easily change this title by either sending the title by the Get view or by simple edit this line of code. Now run this MVC application and write http://localhost:portNo/Empty/GetValues in the address bar of the browser and press enter.
Now we will create a submit button on this view and access the value of this textbox in the HttpPost method of the same action in further article.
Comments
Post a Comment