Tag: ASP.NET MVC

ASP.NET MVC pass data from a view to master

One of recurring questions in MVC is how to share data between views and master. The question must be reformulated : how to share data between ACTION and master.

The short answer is : Model of the View returned from Action have to put some data to the Model of the Master

The long answer here in 4 steps

Step 1: ensuring error.aspx page works fine

a)copy \Views\Shared\Site.Master into siteerror.master( the error.aspx inherits from a specialized model)

b) change in \Views\Shared\Error.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<System.Web.Mvc.HandleErrorInfo>" %>

to

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/SiteError.Master" Inherits="System.Web.Mvc.ViewPage<System.Web.Mvc.HandleErrorInfo>" %>

Step 2 : make the master strongly typed :

add a ModelMaster class

public class ModelMaster
{
public ModelMaster()
{
DataFromAction = "default data";
}
public string DataFromAction { get; set; }
}
 

and display this data to the html of \Views\Shared\Site.Master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage<MasterDataFromAction.Models.ModelMaster>" %>

//code

<h1>This is data shared from View : <%= Model.DataFromAction%></h1>

Step 3. Make the action return a strongly typed view. We will make , for example, the Index action from Home controller.

Add the ViewModelIndex class

public class ViewModelIndex :ModelMaster
{
public ViewModelIndex()
: base()
{
base.DataFromAction = "data from index";
}
}

and modify controller action and view

First Index action in \Controllers\HomeController.cs

public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
ViewModelIndex vmi = new ViewModelIndex();
vmi.DataFromAction = "here comes data from index action";
return View(vmi);
}
 

Then the view :

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MasterDataFromAction.Models.ViewModelIndex>" %>

The result is here :

When do you do this things? The sooner, the better 😉

Please find attached the project

ASP.NET MVC editing fast a property

There are some moments when you want to fast edit a property ( like a status or a name) and you do not want to load the entire “Edit” form for this.More, you are in an edit formula and do not want to add a form.

So here is the solution in ASP.NET MVC  with jquery-1.4.2.min , jquery-ui-1.8.1.custom.min for a modal dialog and some controllers. The most difficult were the javascript, so I let to the final.

We will be editing the name for an employee in 4 steps.The most difficult to understand is the step 4(javascript) , however, it can be re-used with any other object- so you can put it in a common js file.

Step 1

create a view for editing the name , named FastEditEmp


<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<BusinessLogic.Employee>" %>
<!-- edit inline the name -->
<%= Html.HiddenFor(Model=>Model.ID) %>
<%= Html.LabelFor(model=>model.Name) %>
<%= Html.EditorFor(model=>model.Name) %>

Step 2

Create the controllers and verify it works – at least the get  action .


public ActionResult FastEditEmp(int id)
 {
 var emp=EmployeeList.LoadFromID(id);
 return View(emp);
 }
 [HttpPost]
 public ActionResult FastEditEmp(BusinessLogic.Employee emp)
 {
 try
 {

 var dbid = EmployeeList.LoadFromID(emp.ID);
 UpdateModel(dbid);
 dbid.Save();
 return new JsonResult() { Data = new { ok = true, message = "succes" } };

 }
 catch (Exception ex)
 {
 //TODO : log
 return new JsonResult() { Data = new { ok = false, message = "error : " + ex.Message } };

 }
 }

Step 3
Create the hyperlink to edit the name of an employee (emp) :

<a href=’javascript:EditModal(<%= emp.ID%>,”<%=Url.Action(“FastEditEmp”,new {id=emp.ID}) %>”)’>Edit name</a>

Step 4

This is the most difficult one, the javascript. However, more of the code is common no matter what you want to edit fast modal :


var wait = '<%= ResolveUrl("~/Content/Images/wait.gif") %>';
function EditModal(empID,url)
{
// load a please wait dialog
 var $dialog1 = $('<div></div>')
 .html("Loading data <br /> <img src='" + wait + "'></img>")
 .dialog({ autoOpen: false,
 title: 'please wait'
 });
 $dialog1.dialog('open');
// so the please wait dialog was shown to the user. Now load the content of the action specified in url
 $.get(url,
 {
 ID: empID
 },
 function(txt) {

 var $dialog = $('#dialog');
 $dialog.html('');
 $dialog.html(txt)
 .dialog({
 autoOpen: false,
 title: 'Edit',
 modal: true,
 show: 'blind',
 hide: 'explode',
 closeOnEscape: false,
 buttons: {

 "Close": function() {
//just cleanup - no saving
 var allInputs = $(":input:not(:button)");
 var ser = allInputs.serialize();
 allInputs.remove();
 allInputs.empty();
 $(this).dialog("close");
 $(this).dialog('destroy');

 },
 "Save": function() {
//now saving data : serializing and posting
 var allInputs = $(":input:not(:button)");
 var ser = allInputs.serialize();
 allInputs.remove();
 allInputs.empty();

 window.alert(ser); -- debug mode
 $(this).dialog('close');
 $(this).dialog('destroy');
//saving data by posting to same url!
 $.post(url,
 ser,
 function(text) {
 $(this).dialog("close");
 $(this).dialog('destroy');
 if (text.ok) {

 window.alert("Saved - you can change here the display id with jquery");
 window.location.reload(true);
 }
 else {
 window.alert(text.message);
 }

 }
 );

 }

 }

 });

 $dialog1.dialog('close');//closing the wait dialog
 $dialog.dialog('open'); // show main editing dialog
 });

}

 </script>

As always, please find here the saving modal files. Please execute first the emp.sql file, then modify the connection string into the web.config .

Asp.NET MVC and DOS – re-using the ViewModels

(Please read first : http://msprogrammer.serviciipeweb.ro/2010/03/29/asp-net-mvc-orm-and-viewmodels/ )

One of the biggest challenges in programming was write once- GUI everywhere ( Ok, ORM impedance mismatch is another story)

I mean by that re-using the logic from an application in another application. ASP.NET MVC , with the commitment to strongly viewmodels, make me think that it will be now easier to transfer the viewmodels to an console application.

Let’s see the usual Employee-Department and creation.

First the Database :

Then the ViewModel for creating an employeeand for list of employees


public class ViewModelEmployee
 {
 public static DepartmentList ListOfDepartments
 {
 get
 {
 //TODO : put this into cache to not load every time
 DepartmentList dl = new DepartmentList();
 dl.Load();
 return dl;
 }
 }
 }
 public class ViewModelEmployeeCreate : ViewModelEmployee
 {
 public Employee emp = new Employee();

 public static void SaveNew(Employee emp)
 {
 emp.SaveNew();
 }
 }
 public class ViewModelEmployeeList : ViewModelEmployee
 {
 public EmployeeList employees;
 public void Load()
 {
 employees = new EmployeeList();
 employees.Load();
 }
 }

And now the magic :

ASP.NET MVC DOS

[HttpPost]
 public ActionResult Create(Employee emp,long DepartmentID)
 {
 try
 {

 emp.Department = new Department() { ID = DepartmentID };
 ViewModelEmployeeCreate.SaveNew(emp);

 return RedirectToAction("Index");
 }
 catch(Exception ex)
 {
 ModelState.AddModelError("", ex.Message);
 return View(new ViewModelEmployeeCreate(){emp=emp});
 }
 }


Console.WriteLine("choose department");
 var listdep=ViewModelEmployee.ListOfDepartments;
 foreach (var item in listdep)
 {
 Console.WriteLine(item.ID + ")" + item.Name);

 }
 string s=Console.ReadLine();
 long DepartmentID;
 if (!long.TryParse(s, out DepartmentID))
 {
 Console.WriteLine("exit : not a long :" + s);
 return;
 }
 if (!listdep.Exists(item => item.ID == DepartmentID))
 {
 Console.WriteLine("not a valid id:" + s);
 return;
 }
 Employee emp = new Employee();
 emp.Department = new Department() { ID = DepartmentID };
 Console.Write("employee name ?");
 emp.Name= Console.ReadLine();
 ViewModelEmployeeCreate.SaveNew(emp);

Now for listing employees:

ASP.NET MVC DOS
public ActionResult Index()
        {
            ViewModelEmployeeList vmel = new ViewModelEmployeeList();
            vmel.Load();
            return View(vmel);
        }

  ViewModelEmployeeList vmel = new ViewModelEmployeeList();
            vmel.Load();
            foreach (var item in vmel.employees)
            {
                Console.WriteLine(item.Name);
            }

As you can see , the codes are really similar ( although the console application is filled with first verification and the MVC is not )

Please download the application from testaddropdownlist

To install : run the emp.sql file, change in the app.config/web.config the connection string to point to the real database/sql server.

Summary : This simple application shows how to re-use ViewModels from an ASP.NET MVC and a DOS Console Application

Homework : Add  WindowsForms application and do the same.

How To … Create a new site similar with regular internet site in Windows 7

 

Step 1 : Make a Web site with Visual Studio

Step 2 : In IIS Manager create the new site

Step 3: edit the hosts file (administrative rights)

Step 4: Create the Web application, modify his Project=>properties=>Web =>Use local IIS Web Server

Step 5: Edit bindings for new site to point to the folder of application

Step 6: Run Visual Studio