ASP.NET AJAX Control Toolkit ModalPopupExtender Control in Action

– Bài viết khá hay về AJAX Control Toolkit, nếu dùng Web Form bạn không nên bỏ qua,

– Nếu bạn dùng MVC thì có thể không quan tâm bài viết này cũng được

Link chi tiết: http://www.codeproject.com/Articles/34996/ASP-NET-AJAX-Control-Toolkit-ModalPopupExtender-Co

Một số link tham khảo:

– http://csharpdotnetfreak.blogspot.com/2011/04/ajax-modalpopextender-gridview-master.html

 http://www.ericmmartin.com/projects/simplemodal-demos/ (Popup khá đơn giản)

Advertisements

Popup Editing/Adding/Deleting Records with GridView

– Cho phép bạn thao tác các action CRUD trên GridView sử dụng Ajax Control Toolkit, sử dụng khá đơn giản

– Tạo form, validate sử dụng hoàn toàn các control của Web Form

– Nếu bạn dùng ASP.NET MVC thì có thể không quan tâm đến mục này.

Link chi tiết: http://www.codeproject.com/Articles/706078/Popup-Editing-Adding-Deleting-Records-with-GridVie

ASP.NET: GridView CRUD using Twitter Bootstrap Modal Popup

Bài viết hướng dẫn chi tiết các action CRUD trên GridView sử dụng Popup của Bootstrap

Link chi tiết: http://www.programming-free.com/2013/09/gridview-crud-bootstrap-modal-popup.html

Tỷ phú Li Ka-Shing bày cách mua nhà, tậu xe trong 5 năm

Giả sử thu nhập hàng tháng của bạn là 2.000 NDT (khoảng 7 triệu đồng), người giàu nhất châu Á – Li Ka-Shing khuyên rằng hãy chia số tiền này làm 5 phần – chi tiêu hàng ngày, kết giao bạn bè, học tập, du lịch và đầu tư.

Ông trùm bất động sản Li Ka-Shing (Hong Kong, Trung Quốc) hiện là tỷ phú giàu nhất châu Á với số tài sản 29,1 tỷ USD, theo Bloomberg. Xuất thân là trẻ mồ côi, ông đã tự mày mò kinh doanh để nắm trong tay hai đế chế – Cheung Kong và Hutchison Whampoa, đồng thời tham gia nhiều lĩnh vực từ cảng biển, dầu khí, đến bán lẻ, truyền thông đến bất động sản.

Mới đây, website khởi nghiệp e27 đăng tải bài viết của Li Ka-Shing, trong đó ông chia sẻ bí quyết cải thiện cuộc sống trong 5 năm.

Giả sử thu nhập hàng tháng của bạn là 2.000 NDT (khoảng 7 triệu đồng), hãy chia số tiền này làm 5 phần.

Khoản đầu tiên – 600 NDT – dùng để chi trả cuộc sống hàng ngày. Nếu muốn sống đơn giản, bạn chỉ có thể tiêu dưới 20 NDT mỗi ngày. Hãy ăn mì (hoặc bún, miến), một quả trứng và một cốc sữa vào buổi sáng. Trưa thì ăn snack với hoa quả thôi. Còn tối hãy tự nấu tại nhà, rồi uống sữa trước khi đi ngủ. Chi phí ăn uống cả tháng của bạn sẽ chỉ tốn khoảng 500-600 NDT. Khi còn trẻ, cơ thể của bạn sẽ không có quá nhiều vấn đề nếu sống thế này vài năm.

Khoản thứ hai – 400 NDT – để kết giao bạn bè, mở rộng các mối quan hệ. Việc này rất có lợi cho bạn. Tiền điện thoại có thể mất khoảng 100 NDT mỗi tháng. Bên cạnh đó, bạn có thể đãi bạn bè 2 bữa một tháng, hết khoảng 300 NDT. Hãy chọn những người hiểu biết, giàu hơn bạn hoặc có thể giúp bạn trong công việc. Sau một năm, các mối quan hệ này sẽ mang lại những giá trị rất to lớn cho bạn. Danh tiếng, tầm ảnh hưởng và giá trị gia tăng của bạn sẽ được công nhận.

Khoản thứ ba – 300 NDT – để học tập. Mỗi tháng, hãy dành ra 50-100 NDT để mua sách. Vì bạn không có nhiều tiền, hãy cố gắng nâng cao kiến thức. Khi mua sách, hãy đọc cẩn thận và rút ra những bài học và chiến lược trong đó. Sau khi đọc, hãy tự kể lại bằng ngôn ngữ của mình, sau đó chia sẻ với người khác để nâng cao uy tín và mối quan hệ. Bạn cũng nên dành 200 NDT mỗi tháng tham gia các khóa học để bồi dưỡng kiến thức và gặp gỡ những người cùng chí hướng.

Khoản thứ 4 – 200 NDT – tiết kiệm để đi du lịch nước ngoài. Hãy tự thưởng cho mình bằng các chuyến du lịch ít nhất mỗi năm một lần để nâng cao kinh nghiệm cuộc sống. Hãy ở những nhà trọ dành cho giới trẻ (youth hostel) để tiết kiệm chi phí. Trong vài năm, bạn có thể đến nhiều quốc gia, tích lũy nhiều kinh nghiệm. Hãy dùng chúng để “sạc đầy” bản thân, giúp mình có động lực trong công việc.

Khoản cuối cùng – 500 NDT – dùng để đầu tư. Đầu tiên, cứ gửi ở ngân hàng và tích lũy dần dần, coi đó là vốn khởi nghiệp của bạn. Sau đó, bạn có thể mở công ty hay cửa hàng. Hãy bắt đầu từ quy mô nhỏ cho an toàn, đến các hãng bán buôn và tìm kiếm thứ gì khả dĩ để bán. Vì kể cả nếu thua lỗ, bạn cũng không mất nhiều tiền. Còn ngược lại, khi bắt đầu kiếm được, bạn sẽ tự tin hơn và học được cả tá kinh nghiệm mới về kinh doanh. Khi đã kiếm kha khá, bạn có thể nghĩ đến các chiến lược đầu tư dài hạn để có bệ đỡ tài chính vững chắc cho bản thân và gia đình.

Sang năm thứ hai, nếu lương của bạn vẫn là 2.000 NDT, bạn nên cảm thấy xấu hổ vì vẫn chưa phát triển được bản thân. Còn nếu lên 3.000 NDT, bạn sẽ vẫn phải làm việc thật chăm chỉ. Hãy tìm một công việc làm thêm, tốt nhất là nhân viên kinh doanh.

Việc này tương đối khó, nhưng là cách nhanh nhất giúp bạn nắm được nghệ thuật bán hàng. Tất cả các doanh nhân thành đạt đều từng là nhân viên bán hàng xuất sắc. Đây cũng là cơ hội giúp bạn gặp được những người có giá trị với mình về sau. Bên cạnh đó, bạn cũng sẽ được học cái gì nên và không nên bán. Hãy dùng sự nhạy bén về thị trường của mình làm nền tảng cho công ty tương lai.

Trong thời gian này, cố gắng mua ít quần áo và giày dép thôi. Bạn có thể thoải mái shopping khi đã giàu. Còn bây giờ, hãy tiết kiệm. Chỉ mua những món quà nho nhỏ cho những người bạn quan tâm và chia sẻ với họ về những kế hoạch, giấc mơ của bạn.

Hãy cố gắng làm thêm bất kỳ lúc nào có cơ hội. Việc này sẽ mài giũa ý chí và kỹ năng cho bạn, giúp bạn tiến gần mục tiêu tài chính. Đến năm thứ hai, thu nhập của bạn nên tăng lên ít nhất 5.000 NDT, tối thiểu cũng phải là 3.000 NDT. Nếu không, bạn sẽ chẳng theo kịp tốc độ lạm phát đâu.

Bất kể bạn kiếm được bao nhiêu tiền, hãy luôn nhớ chia chúng làm 5 phần. Hãy khiến bản thân mình trở nên có ích. Tăng cường đầu tư vào các mối quan hệ, kiến thức, kinh nghiệm sẽ giúp bạn cải thiện thu nhập. Khi đã có nhiều tiền, bạn sẽ lại cải thiện được chất lượng cuộc sống, có cơ hội kết bạn nhiều hơn, tham gia những khóa học chuyên sâu hơn và tiếp cận những dự án, cơ hội lớn hơn. Dần dần, bạn sẽ hiện thực hóa được giấc mơ mua nhà, ôtô và chuẩn bị tương lai tốt đẹp hơn cho con cái.

Cuộc sống, sự nghiệp và hạnh phúc hoàn toàn nằm trong tầm tay bạn. Hãy lên kế hoạch ngay từ bây giờ. Khi bạn nghèo, hãy ở nhà ít thôi và ra ngoài nhiều hơn. Còn khi đã giàu rồi, hãy làm ngược lại. Khi bạn nghèo, hãy tiêu tiền cho người khác, còn giàu rồi thì hãy chi cho mình. Đây là nghệ thuật sống.

Bên cạnh đó, khi nghèo khó, hãy đối xử tốt với mọi người, đừng tính toán. Còn khi đã giàu rồi, hãy học cách để người khác đối tốt với bạn. Khi còn nghèo, hãy quăng mình ra ngoài và để người khác tận dụng bạn thật tốt. Nhưng khi giàu có, hãy bảo vệ mình, đừng để người khác lợi dụng. Đây là điều rất ít người hiểu được.

Có một lý thuyết nổi tiếng từ Harvard thế này: Số phận của mọi người được quyết định bởi việc anh ta làm gì khi rảnh rỗi, lúc 8h-10h tối. Hãy dùng khoảng thời gian này để học tập, suy nghĩ và tham gia vào các bài giảng hay buổi thảo luận có ích. Chỉ cần kiên trì vài năm, thành công sẽ tìm đến bạn.

Tham khao: http://vinacorp.vn/news/ty-phu-li-ka-shing-bay-cach-mua-nha-tau-xe-trong-5-nam/ct-557333

 

MVC interview questions with answers

Table of contents

Disclaimer

Reading these MVC interview questions does not mean you will go and clear MVC interviews. The purpose of this article is to quickly brush up your MVC knowledge before you go for MVC interviews. This article does not teach MVC, it’s a last minute revision sheet before going for MVC interviews.

If you want to learn MVC from scratch, start by reading Learn MVC ( Model view controller) step by step 7 days or you can also start with my step by step MVC (Model View Controller) video series from YouTube.

What is MVC (Model View Controller)?

MVC is an architectural pattern which separates the representation and user interaction. It’s divided into  three broader sections, Model, View, and Controller. Below is how each one of them handles the task.

  • The View is responsible for the look and feel.
  • Model represents the real world object and provides data to the View.
  • The Controller is responsible for taking the end user request and loading the appropriate Model and View.

Figure: MVC (Model view controller)

Can you explain the complete flow of MVC?

Below are the steps to control flows in MVC (Model, View, and controller) architecture:

  • All end user requests are first sent to the controller.
  • The controller depending on the request decides which model to load. The controller loads the model and attaches the model with the appropriate view.
  • The final view is then attached with the model data and sent as a response to the end user on the browser.

Is MVC suitable for both Windows and Web applications?

The MVC architecture is suited for a web application than Windows. For Window applications, MVP, i.e., “Model View Presenter” is more applicable. If you are using WPF and Silverlight, MVVM is more suitable due to bindings.

What are the benefits of using MVC?

There are two big benefits of MVC:

  • Separation of concerns is achieved as we are moving the code-behind to a separate class file. By moving the binding code to a separate class file we can reuse the code to a great extent.
  • Automated UI testing is possible because now the behind code (UI interaction code) has moved to a simple .NET class. This gives us opportunity to write unit tests and automate manual testing.

Is MVC different from a three layered architecture?

MVC is an evolution of a three layered traditional architecture. Many components of the three layered architecture are part of MVC. So below is how the mapping goes:

Functionality Three layered / tiered architecture Model view controller architecture
Look and Feel User interface View
UI logic User interface Controller
Business logic /validations Middle layer Model
Request is first sent to User interface Controller
Accessing data Data access layer Data Access Layer

Figure: Three layered architecture

What is the latest version of MVC?

When this note was written, four versions were released of MVC: MVC 1 , MVC 2, MVC 3, and MVC 4. So the latest is MVC 4.

What is the difference between each version of MVC?

Below is a detailed table of differences. But during an interview it’s difficult to talk about all of them due to time limitation. So I have highlighted the important differences that you can run through before the interviewer.

MVC 2 MVC 3 MVC 4
  • Client-side validation
  • Templated Helpers Areas
  • Asynchronous Controllers
  • Html.ValidationSummary Helper Method
  • DefaultValueAttribute in Action-Method
  • Parameters binding
  • Binary data with Model Binders
  • DataAnnotations Attributes
  • Model-Validator Providers
  • New RequireHttpsAttributeAction Filter
  • Templated Helpers
  • Display Model-Level Errors
  • Razor
  • Readymade project templates
  • HTML 5 enabled templates
  • Support for Multiple View Engines, JavaScript, and AJAX
  • Model Validation Improvements
  • ASP.NET Web API
  • Refreshed and modernized default project templates. New mobile project template.
  • Many new features to support mobile apps
  • Enhanced support for asynchronous methods

What are HTML helpers in MVC?

HTML helpers help you to render HTML controls in the view. For instance if you want to display a HTML textbox on the view , below is the HTML helper code.

 Collapse | Copy Code
<%= Html.TextBox("LastName") %>

For checkbox below is the HTML helper code. In this way we have HTML helper methods for every HTML control that exists.

 Collapse | Copy Code
<%= Html.CheckBox("Married") %>

What is the difference between “HTML.TextBox” vs “HTML.TextBoxFor”?

Both of them provide the same HTML output, “HTML.TextBoxFor” is strongly typed while “HTML.TextBox” isn’t. Below is a simple HTML code which just creates a simple textbox with “CustomerCode” as name.

 Collapse | Copy Code
Html.TextBox("CustomerCode")

Below is “Html.TextBoxFor” code which creates HTML textbox using the property name ‘CustomerCode” from object “m”.

 Collapse | Copy Code
Html.TextBoxFor(m => m.CustomerCode)

In the same way we have for other HTML controls like for checkbox we have “Html.CheckBox” and “Html.CheckBoxFor”.

What is routing in MVC?

Routing helps you to define a URL structure and map the URL with the controller.

For instance let’s say we want that when a user types “http://localhost/View/ViewCustomer/”, it goes to the “Customer” Controller and invokes the DisplayCustomer action. This is defined by adding an entry in to the routescollection using the maproute function. Below is the underlined code which shows how the URL structure and mapping with controller and action is defined.

 Collapse | Copy Code
routes.MapRoute(
               "View", // Route name
               "View/ViewCustomer/{id}", // URL with parameters
               new { controller = "Customer", action = "DisplayCustomer", 
id = UrlParameter.Optional }); // Parameter defaults

Where is the route mapping code written?

The route mapping code is written in the “global.asax” file.

Can we map multiple URL’s to the same action?

Yes, you can, you just need to make two entries with different key names and specify the same controller and action.

How can we navigate from one view to another using a hyperlink?

By using the ActionLink method as shown in the below code. The below code will create a simple URL which helps to navigate to the “Home” controller and invoke the GotoHome action.

 Collapse | Copy Code
<%= Html.ActionLink("Home","Gotohome") %>

How can we restrict MVC actions to be invoked only by GET or POST?

We can decorate the MVC action with the HttpGet or HttpPost attribute to restrict the type of HTTP calls. For instance you can see in the below code snippet the DisplayCustomer action can only be invoked by HttpGet. If we try to make HTTP POST on DisplayCustomer, it will throw an error.

 Collapse | Copy Code
[HttpGet]
public ViewResult DisplayCustomer(int id)
{
    Customer objCustomer = Customers[id];
    return View("DisplayCustomer",objCustomer);
}

How can we maintain sessions in MVC?

Sessions can be maintained in MVC by three ways: tempdata, viewdata, and viewbag.

What is the difference between tempdata, viewdata, and viewbag?

Figure: Difference between tempdata, viewdata, and viewbag
  • Temp data – Helps to maintain data when you move from one controller to another controller or from one action to another action. In other words when you redirect, tempdata helps to maintain data between those redirects. It internally uses session variables.
  • View data – Helps to maintain data when you move from controller to view.
  • View Bag – It’s a dynamic wrapper around view data. When you use Viewbag type, casting is not required. It uses the dynamic keyword internally.

Figure: dynamic keyword
  • Session variables – By using session variables we can maintain data from any entity to any entity.
  • Hidden fields and HTML controls – Helps to maintain data from UI to controller only. So you can send data from HTML controls or hidden fields to the controller using POST or GET HTTP methods.

Below is a summary table which shows the different mechanisms for persistence.

Maintains data between ViewData/ViewBag TempData Hidden fields Session
Controller to Controller No Yes No Yes
Controller to View Yes No No Yes
View to Controller No No Yes Yes

What are partial views in MVC?

Partial view is a reusable view (like a user control) which can be embedded inside other view. For example let’s say all your pages of your site have a standard structure with left menu, header, and footer as shown in the image below.

Figure: Partial views in MVC

For every page you would like to reuse the left menu, header, and footer controls. So you can go and create partial views for each of these items and then you call that partial view in the main view.

How did you create a partial view and consume it?

When you add a view to your project you need to check the “Create partial view” check box.

Figure: Create partial view

Once the partial view is created you can then call the partial view in the main view using the Html.RenderPartialmethod as shown in the below code snippet:

 Collapse | Copy Code
<body>
<div>
<% Html.RenderPartial("MyView"); %>
</div>
</body>

How can we do validations in MVC?

One of the easiest ways of doing validation in MVC is by using data annotations. Data annotations are nothing but attributes which can be applied on model properties. For example, in the below code snippet we have a simpleCustomer class with a property customercode.

This CustomerCode property is tagged with a Required data annotation attribute. In other words if this model is not provided customer code, it will not accept it.

 Collapse | Copy Code
public class Customer
{
    [Required(ErrorMessage="Customer code is required")]
    public string CustomerCode
    {
        set;
        get;
    } 
}

In order to display the validation error message we need to use the ValidateMessageFor method which belongs to the Html helper class.

 Collapse | Copy Code
<% using (Html.BeginForm("PostCustomer", "Home", FormMethod.Post))
{ %>
<%=Html.TextBoxFor(m => m.CustomerCode)%>
<%=Html.ValidationMessageFor(m => m.CustomerCode)%>
<input type="submit" value="Submit customer data" />
<%}%>

Later in the controller we can check if the model is proper or not by using the ModelState.IsValid property and accordingly we can take actions.

 Collapse | Copy Code
public ActionResult PostCustomer(Customer obj)
{
    if (ModelState.IsValid)
    {
        obj.Save();
        return View("Thanks");
    }
    else
    {
        return View("Customer");
    }
}

Below is a simple view of how the error message is displayed on the view.

Figure: Validations in MVC

Can we display all errors in one go?

Yes, we can; use the ValidationSummary method from the Html helper class.

 Collapse | Copy Code
<%= Html.ValidationSummary() %>

What are the other data annotation attributes for validation in MVC?

If you want to check string length, you can use StringLength.

 Collapse | Copy Code
[StringLength(160)]
public string FirstName { get; set; }

In case you want to use a regular expression, you can use the RegularExpression attribute.

 Collapse | Copy Code
[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")]public string Email { get; set; }

If you want to check whether the numbers are in range, you can use the Range attribute.

 Collapse | Copy Code
[Range(10,25)]public int Age { get; set; }

Sometimes you would like to compare the value of one field with another field, we can use the Compare attribute.

 Collapse | Copy Code
public string Password { get; set; }[Compare("Password")]public string ConfirmPass { get; set; }

In case you want to get a particular error message , you can use the Errors collection.

 Collapse | Copy Code
var ErrMessage = ModelState["Email"].Errors[0].ErrorMessage;

If you have created the model object yourself you can explicitly call TryUpdateModel in your controller to check if the object is valid or not.

 Collapse | Copy Code
TryUpdateModel(NewCustomer);

In case you want add errors in the controller you can use the AddModelError function.

 Collapse | Copy Code
ModelState.AddModelError("FirstName", "This is my server-side error.");

How can we enable data annotation validation on client side?

It’s a two-step process: first reference the necessary jQuery files.

 Collapse | Copy Code
<script src="<%= Url.Content("~/Scripts/jquery-1.5.1.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>

The second step is to call the EnableClientValidation method.

 Collapse | Copy Code
<% Html.EnableClientValidation(); %>

What is Razor in MVC?

It’s a light weight view engine. Till MVC we had only one view type, i.e., ASPX. Razor was introduced in MVC 3.

Why Razor when we already have ASPX?

Razor is clean, lightweight, and syntaxes are easy as compared to ASPX. For example, in ASPX to display simple time, we need to write:

 Collapse | Copy Code
<%=DateTime.Now%>

In Razor, it’s just one line of code:

 Collapse | Copy Code
@DateTime.Now

So which is a better fit, Razor or ASPX?

As per Microsoft, Razor is more preferred because it’s light weight and has simple syntaxes.

How can you do authentication and authorization in MVC?

You can use Windows or Forms authentication for MVC.

How to implement Windows authentication for MVC?

For Windows authentication you need to modify the web.config file and set the authentication mode to Windows.

 Collapse | Copy Code
<authentication mode="Windows"/>
<authorization>
<deny users="?"/>
</authorization>

Then in the controller or on the action, you can use the Authorize attribute which specifies which users have access to these controllers and actions. Below is the code snippet for that. Now only the users specified in the controller and action can access it.

 Collapse | Copy Code
[Authorize(Users= @"WIN-3LI600MWLQN\Administrator")]
public class StartController : Controller
{
    //
    // GET: /Start/
    [Authorize(Users = @"WIN-3LI600MWLQN\Administrator")]
    public ActionResult Index()
    {
        return View("MyView");
    }
}

How do you implement Forms authentication in MVC?

Forms authentication is implemented the same way as in ASP.NET. The first step is to set the authentication mode equal to Forms. The loginUrl points to a controller here rather than a page.

 Collapse | Copy Code
<authentication mode="Forms">
<forms loginUrl="~/Home/Login"  timeout="2880"/>
</authentication>

We also need to create a controller where we will check if the user is proper or not. If the user is proper we will set the cookie value.

 Collapse | Copy Code
public ActionResult Login()
{
    if ((Request.Form["txtUserName"] == "Shiv") && 
          (Request.Form["txtPassword"] == "Shiv@123"))
    {
        FormsAuthentication.SetAuthCookie("Shiv",true);
        return View("About");
    }
    else
    {
        return View("Index");
    }
}

All the other actions need to be attributed with the Authorize attribute so that any unauthorized user making a call to these controllers will be redirected to the controller (in this case the controller is “Login”) which will do the authentication.

 Collapse | Copy Code
[Authorize]
PublicActionResult Default()
{
return View();
}
[Authorize]
publicActionResult About()
{
return View();
}

How to implement AJAX in MVC?

You can implement AJAX in two ways in MVC:

  • AJAX libraries
  • jQuery

Below is a simple sample of how to implement AJAX by using the “AJAX” helper library. In the below code you can see we have a simple form which is created by using the Ajax.BeginForm syntax. This form calls a controller action calledgetCustomer. So now the submit action click will be an asynchronous AJAX call.

 Collapse | Copy Code
<script language="javascript">
function OnSuccess(data1) 
{
// Do something here
}
</script>
<div>
<%
        var AjaxOpt = new AjaxOptions{OnSuccess="OnSuccess"};        
    %>
<% using (Ajax.BeginForm("getCustomer","MyAjax",AjaxOpt)) { %>
<input id="txtCustomerCode" type="text" /><br />
<input id="txtCustomerName" type="text" /><br />
<input id="Submit2" type="submit" value="submit"/></div>
<%} %>

In case you want to make AJAX calls on hyperlink clicks, you can use the Ajax.ActionLink function as shown in the below code.

Figure: Implement AJAX in MVC

So if you want to create an AJAX asynchronous hyperlink by name GetDate which calls the GetDate function in the controller, below is the code for that. Once the controller responds, this data is displayed in the HTML DIV tag namedDateDiv.

 Collapse | Copy Code
<span id="DateDiv" />
<%: 
Ajax.ActionLink("Get Date","GetDate",
new AjaxOptions {UpdateTargetId = "DateDiv" })
%>

Below is the controller code. You can see how the GetDate function has a pause of 10 seconds.

 Collapse | Copy Code
public class Default1Controller : Controller
{
   public string GetDate()
   {
       Thread.Sleep(10000);
       return DateTime.Now.ToString();
   }
}

The second way of making an AJAX call in MVC is by using jQuery. In the below code you can see we are making an AJAX POST call to a URL /MyAjax/getCustomer. This is done by using $.post. All this logic is put into a function calledGetData and you can make a call to the GetData function on a button or a hyperlink click event as you want.

 Collapse | Copy Code
function GetData() 
{
    var url = "/MyAjax/getCustomer";
    $.post(url, function (data) 
    {
        $("#txtCustomerCode").val(data.CustomerCode);
        $("#txtCustomerName").val(data.CustomerName);
    }
    )
}

What kind of events can be tracked in AJAX?

Figure: Tracked in AJAX

What is the difference between ActionResult and ViewResult?

  • ActionResult is an abstract class while ViewResult derives from the ActionResult class. ActionResulthas several derived classes like ViewResultJsonResultFileStreamResult, and so on.
  • ActionResult can be used to exploit polymorphism and dynamism. So if you are returning different types of views dynamically, ActionResult is the best thing. For example in the below code snippet, you can see we have a simple action called DynamicView. Depending on the flag (IsHtmlView) it will either return aViewResult or JsonResult.
 Collapse | Copy Code
public ActionResult DynamicView()
{
   if (IsHtmlView)
     return View(); // returns simple ViewResult
   else
     return Json(); // returns JsonResult view
}

What are the different types of results in MVC?

Note: It’s difficult to remember all the 12 types. But some important ones you can remember for the interview areActionResultViewResult, and JsonResult. Below is a detailed list for your interest:

There 12 kinds of results in MVC, at the top is the ActionResult class which is a base class that can have 11 subtypes as listed below:

  1. ViewResult – Renders a specified view to the response stream
  2. PartialViewResult – Renders a specified partial view to the response stream
  3. EmptyResult – An empty response is returned
  4. RedirectResult – Performs an HTTP redirection to a specified URL
  5. RedirectToRouteResult – Performs an HTTP redirection to a URL that is determined by the routing engine, based on given route data
  6. JsonResult – Serializes a given ViewData object to JSON format
  7. JavaScriptResult – Returns a piece of JavaScript code that can be executed on the client
  8. ContentResult – Writes content to the response stream without requiring a view
  9. FileContentResult – Returns a file to the client
  10. FileStreamResult – Returns a file to the client, which is provided by a Stream
  11. FilePathResult – Returns a file to the client

What are ActionFilters in MVC?

ActionFilters help you to perform logic while an MVC action is executing or after an MVC action has executed.

Figure: ActionFilters in MVC

Action filters are useful in the following scenarios:

  1. Implement post-processing logic before the action happens.
  2. Cancel a current execution.
  3. Inspect the returned value.
  4. Provide extra data to the action.

You can create action filters by two ways:

  • Inline action filter.
  • Creating an ActionFilter attribute.

To create an inline action attribute we need to implement the IActionFilter interface. The IActionFilterinterface has two methods: OnActionExecuted and OnActionExecuting. We can implement pre-processing logic or cancellation logic in these methods.

 Collapse | Copy Code
public class Default1Controller : Controller , IActionFilter
{
    public ActionResult Index(Customer obj)
    {
        return View(obj);
    }
    void IActionFilter.OnActionExecuted(ActionExecutedContext filterContext)
    {
        Trace.WriteLine("Action Executed");
    }
    void IActionFilter.OnActionExecuting(ActionExecutingContext filterContext)
    {
        Trace.WriteLine("Action is executing");
    }
}

The problem with the inline action attribute is that it cannot be reused across controllers. So we can convert the inline action filter to an action filter attribute. To create an action filter attribute we need to inherit fromActionFilterAttribute and implement the IActionFilter interface as shown in the below code.

 Collapse | Copy Code
public class MyActionAttribute : ActionFilterAttribute , IActionFilter
{
    void IActionFilter.OnActionExecuted(ActionExecutedContext filterContext)
    {
        Trace.WriteLine("Action Executed");
    }
    void IActionFilter.OnActionExecuting(ActionExecutingContext filterContext)
    {
      Trace.WriteLine("Action executing");
    }
}

Later we can decorate the controllers on which we want the action attribute to execute. You can see in the below code I have decorated the Default1Controller with the MyActionAttribute class which was created in the previous code.

 Collapse | Copy Code
[MyActionAttribute]
public class Default1Controller : Controller 
{
    public ActionResult Index(Customer obj)
    {
        return View(obj);
    }
}

Can we create our custom view engine using MVC?

Yes, we can create our own custom view engine in MVC. To create our own custom view engine we need to follow three steps:

Let’ say we want to create a custom view engine where in the user can type a command like “<DateTime>” and it should display the current date and time.

Step 1: We need to create a class which implements the IView interface. In this class we should write the logic of how the view will be rendered in the render function. Below is a simple code snippet for that.

 Collapse | Copy Code
public class MyCustomView : IView
{
    private string _FolderPath; // Define where  our views are stored
    public string FolderPath
    {
        get { return _FolderPath; }
        set { _FolderPath = value; }
    }

    public void Render(ViewContext viewContext, System.IO.TextWriter writer)
    {
       // Parsing logic <dateTime>
        // read the view file
        string strFileData = File.ReadAllText(_FolderPath);
        // we need to and replace <datetime> datetime.now value
        string strFinal = strFileData.Replace("<DateTime>", DateTime.Now.ToString());
        // this replaced data has to sent for display
        writer.Write(strFinal); 
    }
}

Step 2: We need to create a class which inherits from VirtualPathProviderViewEngine and in this class we need to provide the folder path and the extension of the view name. For instance, for Razor the extension is “cshtml”; for aspx, the view extension is “.aspx”, so in the same way for our custom view, we need to provide an extension. Below is how the code looks like. You can see the ViewLocationFormats is set to the Views folder and the extension is “.myview”.

 Collapse | Copy Code
public class MyViewEngineProvider : VirtualPathProviderViewEngine
{
    // We will create the object of Mycustome view
    public MyViewEngineProvider() // constructor
    {
        // Define the location of the View file
        this.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.myview", 
          "~/Views/Shared/{0}.myview" }; //location and extension of our views
    }
    protected override IView CreateView(
      ControllerContext controllerContext, string viewPath, string masterPath)
    {
        var physicalpath = controllerContext.HttpContext.Server.MapPath(viewPath);
        MyCustomView obj = new MyCustomView(); // Custom view engine class
        obj.FolderPath = physicalpath; // set the path where the views will be stored
        return obj; // returned this view paresing
        // logic so that it can be registered in the view engine collection
    }
    protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
    {
        var physicalpath = controllerContext.HttpContext.Server.MapPath(partialPath);
        MyCustomView obj = new MyCustomView(); // Custom view engine class
        obj.FolderPath = physicalpath; // set the path where the views will be stored
        return obj;
        // returned this view paresing logic
        // so that it can be registered in the view engine collection
    }
}

Step 3: We need to register the view in the custom view collection. The best place to register the custom view engine in the ViewEngines collection is the global.asax file. Below is the code snippet for that.

 Collapse | Copy Code
protected void Application_Start()
{
    // Step3 :-  register this object in the view engine collection
    ViewEngines.Engines.Add(new MyViewEngineProvider());
    …..
}

Below is a simple output of the custom view written using the commands defined at the top.

Figure: Custom view engine using MVC

If you invoke this view, you should see the following output:

How to send result back in JSON format in MVC

In MVC, we have the JsonResult class by which we can return back data in JSON format. Below is a simple sample code which returns back a Customer object in JSON format using JsonResult.

 Collapse | Copy Code
public JsonResult getCustomer()
{
    Customer obj = new Customer();
    obj.CustomerCode = "1001";
    obj.CustomerName = "Shiv";
    return Json(obj,JsonRequestBehavior.AllowGet);
}

Below is the JSON output of the above code if you invoke the action via the browser.

What is WebAPI?

HTTP is the most used protocol. For the past many years, browser was the most preferred client by which we consumed data exposed over HTTP. But as years passed by, client variety started spreading out. We had demand to consume data on HTTP from clients like mobile, JavaScript, Windows applications, etc.

For satisfying the broad range of clients REST was the proposed approach. You can read more about REST from the WCF chapter.

WebAPI is the technology by which you can expose data over HTTP following REST principles.

But WCF SOAP also does the same thing, so how does WebAPI differ?

SOAP WEB API
Size Heavy weight because of complicated WSDL structure. Light weight, only the necessary information is transferred.
Protocol Independent of protocols. Only for HTTP protocol
Formats To parse SOAP message, the client needs to understand WSDL format. Writing custom code for parsing WSDL is a heavy duty task. If your client is smart enough to create proxy objects like how we have in .NET (add reference) then SOAP is easier to consume and call. Output of WebAPI are simple string messages, JSON, simple XML format, etc. So writing parsing logic for that is very easy.
Principles SOAP follows WS-* specification. WebAPI follows REST principles. (Please refer to REST in WCF chapter.)

With WCF you can implement REST, so why WebAPI?

WCF was brought into implement SOA, the intention was never to implement REST. WebAPI is built from scratch and the only goal is to create HTTP services using REST. Due to the one point focus for creating REST service, WebAPI is more preferred.

How to implement WebAPI in MVC

Below are the steps to implement WebAPI:

Step 1: Create the project using the WebAPI template.

Figure: Implement WebAPI in MVC

Step 2: Once you have created the project you will notice that the controller now inherits from ApiController and you can now implement POST, GET, PUT, and DELETE methods of the HTTP protocol.

 Collapse | Copy Code
public class ValuesController : ApiController
{
    // GET api/values
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }
    // GET api/values/5
    public string Get(int id)
    {
        return "value";
    }
    // POST api/values
    public void Post([FromBody]string value)
    {
    }
    // PUT api/values/5
    public void Put(int id, [FromBody]string value)
    {
    }
    // DELETE api/values/5
    public void Delete(int id)
    {
    }
}

Step 3: If you make an HTTP GET call you should get the below results:

Figure: HTTP

How can we detect that an MVC controller is called by POST or GET?

To detect if the call on the controller is a POST action or a GET action we can use the Request.HttpMethod property as shown in the below code snippet.

 Collapse | Copy Code
public ActionResult SomeAction()
{
    if (Request.HttpMethod == "POST")
    {
        return View("SomePage");
    }
    else
    {
        return View("SomeOtherPage");
    }
}

What is bundling and minification in MVC?

Bundling and minification helps us improve request load times of a page thus increasing performance.

How does bundling increase performance?

Web projects always need CSS and script files. Bundling helps us combine multiple JavaScript and CSS files in to a single entity thus minimizing multiple requests in to a single request.

For example consider the below web request to a page . This page consumes two JavaScript files Javascript1.js andJavascript2.js. So when this is page is requested it makes three request calls:

  • One for the Index page.
  • Two requests for the other two JavaScript files: Javascript1.js and Javascript2.js.

The below scenario can become worse if we have a lot of JavaScript files resulting in  multiple requests, thus decreasing performance. If we can somehow combine all the JS files into a single bundle and request them as a single unit that would result in increased performance (see the next figure which has a single request).


So how do we implement bundling in MVC?

Open BundleConfig.cs from the App_Start folder.

In BundleConfig.cs, add the JS files you want bundle into a single entity in to the bundles collection. In the below code we are combining all the javascript JS files which exist in the Scripts folder as a single unit in to the bundle collection.

 Collapse | Copy Code
bundles.Add(new ScriptBundle("~/Scripts/MyScripts").Include(
"~/Scripts/*.js"));

Below is how your BundleConfig.cs file will look like:

 Collapse | Copy Code
public  class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/Scripts/MyScripts").Include(
           "~/Scripts/*.js"));
        BundleTable.EnableOptimizations = true;
    }
}

Once you have combined your scripts into one single unit we then to include all the JS files into the view using the below code. The below code needs to be put in the ASPX or Razor view.

 Collapse | Copy Code
<%= Scripts.Render("~/Scripts/MyScripts")  %>

If you now see your page requests you would see that script request is combined into one request.

How can you test bundling in debug mode?

If you are in a debug mode you need to set EnableOptimizations to true in the bundleconfig.cs file or else you will not see the bundling effect in the page requests.

 Collapse | Copy Code
BundleTable.EnableOptimizations = true;

Explain minification and how to implement it

Minification reduces the size of script and CSS files by removing blank spaces , comments etc. For example below is a simple javascript code with comments.

 Collapse | Copy Code
// This is test
var x = 0;
x = x + 1;
x = x * 2;

After implementing minification the JavaScript code looks like below. You can see how whitespaces and comments are removed to minimize file size, thus increasing performance.

 Collapse | Copy Code
var x=0;x=x+1;x=x*2;

How do we implement minification?

When you implement bundling, minification is implemented by itself. In other words the steps to implement bundling and minification are the same.

Explain Areas in MVC?

Areas help you to group functionalities in to independent modules thus making your project more organized. For example in the below MVC project we have four controller classes and as time passes by if more controller classes are added it will be difficult to manage. In bigger projects you will end up with 100’s of controller classes making life hell for maintenance.

If we can group controller classes in to logical section like “Invoicing” and “Accounting” that would make life easier and that’s what “Area” are meant to.

You can add an area by right clicking on the MVC solution and clicking on “Area” menu as shown in the below figure.

In the below image we have two “Areas” created “Account” and “Invoicing” and in that I have put the respective controllers. You can see how the project is looking more organized as compared to the previous state.

Explain the concept of View Model in MVC?

A view model is a simple class which represents data to be displayed on the view.

For example below is a simple customermodel object with “CustomerName” and “Amount” property.

 Collapse | Copy Code
CustomerViewModel obj = new CustomerViewModel();
obj.Customer.CustomerName = "Shiv";
obj.Customer.Amount = 1000;

But when this “Customer” model object is displayed on the MVC view it looks something as shown in the below figure. It has “CustomerName” , “Amount” plus “Customer Buying Level” fields on the view / screen. “Customer buying Level” is a color indicationwhich indicates how aggressive the customer is buying.

“Customer buying level” color depends on the value of the “Amount property. If the amount is greater than 2000 then color is red , if amount is greater than 1500 then color is orange or else the color is yellow.

In other words “Customer buying level” is an extra property which is calculated on the basis of amount.

So the Customer viewmodel class has three properties

  • “TxtCustomerName” textbox takes data from “CustomerName” property as it is.
  • “TxtAmount” textbox takes data from “Amount” property of model as it is.
  • “CustomerBuyingLevelColor” displays color value depending on the “Amount “ value.
Customer Model Customer ViewModel
CustomerName TxtCustomerName
Amount TxtAmount
CustomerBuyingLevelColor

What kind of logic view model class will have?

As the name says view model this class has the gel code or connection code which connects the view and the model.

So the view model class can have following kind of logics:-

  • Color transformation logic: – For example you have a “Grade” property in model and you would like your UI to display “red” color for high level grade, “yellow” color for low level grade and “green” color of ok grade.
  • Data format transformation logic :-Your model has a property “Status” with “Married” and “Unmarried” value. In the UI you would like to display it as a checkbox which is checked if “married” and unchecked if “unmarried”.
  • Aggregation logic: –You have two differentCustomer and Address model classes and you have view which displays both “Customer” and “Address” data on one go.
  • Structure downsizing: – You have “Customer” model with “customerCode” and “CustomerName” and you want to display just “CustomerName”. So you can create a wrapper around model and expose the necessary properties.

    Download an e-learning copy of MVC interview Q&A from the top of this article for your preparation.For technical training related to various topics including ASP.NET, Design Patterns, WCF, MVC, BI, WPF contactSukeshMarla@gmail.com or visit www.sukesh-marla.com

    Finally do not forget to visit my video site which covers lots of C# interview questions and answers:www.questpond.com.

 

Link goc: http://www.codeproject.com/Articles/556995/MVC-interview-questions-with-answers

Top 5 Developer Technology Trends For 2014

The previous 5 years have been a golden era for technology. We must embrace the innovations and the challenges we have encountered during this era. Most of us love these challenges. That is what makes us what we are. We build the future. We build for the future. We are vested in the future. And we innovate the future.

In the past few years, technology has not only helped us connect all over the globe but has also helped us live longer and with an improved quality of life. Technology has helped us fight and cure some serious diseases and the trend continues. World famous technologist, Mr. Bill Gates wrote in his annual letter that the world is improving each year and humans are living longer and healthier than ever before. Mr. Gates also wrote that by year the 2035, there will be nearly no poor countries left in the world.

“By 2035, there will be almost no poor countries left in the world.”

– Bill Gates

Not only just the connectivity, but today humans are becoming involved in communities more than ever before. Today, during a crisis, help arrives much faster than ever before. Today, information is being consumed more than ever before. I would not say humans are more intelligent but I can certainly say that they are becoming more knowledgeable.

Most of the credit goes to the technology. Let’s take an example of C# Corner. C# Corner was founded in 1999-2000 as a code sharing website where I started sharing new topics I learned. Slowly, it opened up doors to other members and contributors. Many of them today are famous authors, architects, project managers, CIOs and CEOs. Some have started their own companies. Recently, I met a successful CEO who admitted that his company began with products he built using one of my articles on C# Corner. C# Corner has helped millions of developers in the past 14 years. This has all been enabled by technology.

“C# Corner has helped millions of developers worldwide.”
– Mahesh Chand

If you look back at the Top 6 Software Development Trends in 2011, it was an era of cloud computing, smart devices, bulk management and the social media integration. Three years later, here we are with a different view of technologies.

As technologists, it is very important for us to understand the current and the future trends. In this article, my goal is to focus on the top 5 software technology trends for the year 2014. My data gathering philosophy is quite different. While I do read online publications and reports, most of my analysis is done using my own experience working with various startups, small, medium and large local companies.

Top 5 Developer Trends for 2014

In the year 2014, I see opportunity for the following 5 technologies:

 

  1. JavaScript and HTML 5
  2. Big Data
  3. Mobile and Apps
  4. Personal and Private Clouds
  5. Wearable

 

Trend #1. JavaScript and HTML 5

HTML 5 was the darling of 2011 and 2012 but 2013 has been loving JavaScript and JS related libraries. JavaScript is not only browser friendly but also very flexible and easy to use. JavaScript libraries are on the rise. There are hundreds if not thousands of good and useful libraries developed by the developers and most of them are free and open source.

JavaScript libraries like jQuery, Node.js, Knockout.js, AngularJS, and Backbone.JS are becoming a part of the mainstream web development. While the mobile trends are growing, so are the needs for responsive and interactive web sites and JavaScript is a big player in it.

Recently, HTML 5 has continued to become a vital part of the Web development. However, HTML 5 trends have declined compared to JavaScript.

Figure 1 is a Google Trends graph showing the popularity of JavaScript over HTML 5 in year 2013.

Figure 1

Now, these trends may provide some idea but as we all know, both HTML and JavaScript are used together. As a web developer, just one is not going to help you. You must know and use both.

Trend #2. Big Data

Big Data has been the technology of 2013 and continues to be in demand in 2014. Figure 2 shows Google Trends for big data in 2013 and based on this, I can easily predict a high demand for big data analysts and scientists in 2014. Google Trends are not only where I got my facts; I also meet many clients and I am being asked for big data engineers and analysts.

Figure 2

As its name suggests, Big Data is a large and complex collection of data. Traditional DBMS and relational databases are not designed to handle and process big data. Today’s requirements has become such that we need everything now. Due to the Internet speed, people don’t want to wait.

The challenge of Big Data is not only the large volume of data but also the processing and formatting of the data. Once the large data is stored, how do you search, index, process and generate it in the format that applications need.

Last year alone, there have been hundreds of startups focusing on just big data. A few key early adopters in big data platforms are SAP Hana, Vertica, VoltDB, Dryad, APACHE Pig, Apache Hive, and Apache Mahout. Most of the major technology companies including Oracle, Microsoft, Google, and Amazon are spending a major budget on big data.

IDC predicts a $24 Billion market for Big Data in 2016. Figure 3 lists the top vendors by revenue in Big Data.

Figure 3

Trend #3. Mobile and Apps

There are 6.587 billion mobile devices in the world, according to mobiThinking.com. The table in Figure 4 lists the total devices in the world and the top 14 countries.

Figure 4

Today, software development is changing rapidly. The software industry is ready to disrupt the way we think about software. Not only the businesses but the consumers and the developers think differently as a result of the way software is built, maintained and consumed.

Mobiles and apps are the trends today. Every business wants to move to mobile. Every person wants to consume information and service via his/her mobile.

“iOS and Android developers demand will continue to grow in 2014.”

Both the Google Play store and Apple iTunes Store have over 1 Million apps and over billons of downloads. Even Microsoft’s new baby, Windows Store has over 200,000 apps. An average US smartphone user has 41 apps downloads.

That means, both iOS and Android developers are in and will be in high demand.

Android app development has grown much faster in 2013 compared to iOS and Windows Phone. Google Trends in Figure 5 present the following graph trends for iOS vs Android vs Windows Phone.

Figure 5

In the preceding graph, the red line is Android, the blue line is iOS and the yellow line is Windows Phone.

“We’re seeing a tremendous disruption by mobile”

– Prashant Fuloria

“We’re seeing a tremendous disruption by mobile” as huge numbers of people move from the traditional web to mobile devices, Prashant Fuloria, Chief Product Officer of Flurry said. That’s being driven by the large number of mobile devices around the world, and there’s plenty of room for more growth.

Trend #4. Personal and Private Clouds

Personal clouds are becoming a way to store and manage our personal data and documents. If you look at Google, Apple, Microsoft, Adobe and even companies like Sony have built personal clouds for their users. Now, all that users must do is, have a smart device with an Internet connection

Google, Microsoft, and Adobe continue to improve their products to work in the cloud. Not only consumer services but heavy resource centric products such as Adobe Photoshop, Google Docs, Microsoft Office 365 and even Visual Studio Online are now cloud based solutions. From the business aspect, look around and you will find cloud solutions for accounting, billing, scheduling, mailing, document management systems and pretty much everything else.

“Personal Clouds will be the way to store personal data.”

A private cloud is a secured cloud solution built for a specific client or product. Each private cloud has a dedicated pool of resources allocated to the account. Private clouds are better suited for clients that need privacy, security, and control.

Trend #5. Wearable Devices

The next generation of mobile seems to be like the wearable devices. Samsung, Apple, Microsoft and other companies are now working on wearable devices such as watches, keys, glasses, and clothes.

 

For software developers, all we need to do is learn one more API for a device. However, it seems like Android and Java will be big players in this field. For example, to build a Google Glass app, all you need to do is, learn the Glass API and start building the app. Apple iOS and Microsoft Windows Phone are way behind in this field.

“Wearable app and Android will be the trend to watch in 2014.”

2014 will be the year of hobbyist app developers focusing on wearable device app development.

Conclusion

In 2013 if you look at the big picture, all of these top 5 trends (JavaScript, Big Data, Mobile, App, Cloud, and Wearable) point to a single outcome. That is the consumption of information on-the-go, any type, any size, anywhere and anytime. The information is stored in the form of big data, stored in enterprise, private, and personal clouds, and consumed via mobile and wearable devices. The apps are built using native and JavaScript/HTML 5 combinations. For 2014, keep an eye on personal clouds and wearable app development.

Link gốc: http://www.c-sharpcorner.com/UploadFile/mahesh/top-5-developer-technology-trends-for-2014/

 

Create Your First MVC Application Using Sencha Touch

Before reading this article please goes through the following articles.

  1. Introduction to Sencha Touch 2
  2. Hello World App using Sencha Touch 2
  3. Sample form application using Sencha Touch 2
  4. Dealing with containers in Sencha Touch 2
  5. Working with DataBound Controls
  6. Introduction to MVC in Sencha Touch 2

Introduction:

In the last article we saw what MVC is and how it works with Sencha Touch. In this article we will create our first MVC application using Sencha Touch. As in the last article I already said that MVC here in Sencha Touch is in the client end of the MVC architecture.

In this article we will learn how to create a MVC application by creating a MVC structure and how the Sencha Touch framework fits into MVC. Sencha has built-in support for MVC and Sencha supports the entire application life cycle from generating applications to deploying it to production. In this article we will not use any tools or anything to generate or to build the application. In our forthcoming articles we will make this task easy. So here we will start our application development in a traditional way.

Step 1:

Launch your Visual Studio and create a blank website without any page. Just add a web.config file for some configuration setting. Add a system.webServer tag to the config file to respond the JSON MIME type as in the following:

<system.webServer>
<staticContent>
<mimeMap fileExtension=”.json” mimeType=”application/json” />
</staticContent>
</system.webServer>

Step 2:

Create a directory structure like the following image.

Here in this article our purpose is to create one main list and to open the detail page upon clicking of the list item. From this you will get a clear idea of how Sencha works with MVC. Here you will get the idea of loading a Store binding to the Model, how the Controller works between the flow, and so on.

One more benefit of Sencha is that it places the classes in the namespaces hierarchy. Hence we create the main app folder and inside it create four different folders to place our Controllers, Views, Models and Stores. Except add CSS and src folders that contain the CSS and framework script files taken from Sencha.com.

As in our first article we saw that Sencha Touch applications are single page applications so we need to add only one HTML page and one entry point js file named app.js.

Proposed Flow:

As we already know, Sencha Touch is a client end framework hence what it will do is the following. First the user makes a request to index.html and index.html is loaded into the user’s browser with all other files (Models, Views, Controllers, Stores, entry point file and framework file). From here our actual MVC starts.

Here first we are loading data from a JSON file located in the server with the name “users.json”. What we will do is we will load the data from this JSON file into the Model using the Store so you will get the idea of how to load a Store and how to make a server request. As we saw in the last article the Store is responsible for talking with the back-end server.

Step 3:

Next you need to add our js classes so add one Controller, one Model, one Store and three different Views. So now you have the question, why should we add three Views, so here is the reason. Because one View will be our Main View and will never be removed from the viewport, we will simply replace the inner content of this View with other Views. This View will be a type of Master View to provide a consistent look to the application. Other two Views will be used, one for displaying the list and one for displaying the details page. Hence add three Views with the name Main, UsingListView and UserDetailView.

Step 4:

Create an entry point file named app.js and write the following code.

Ext.application({
name: ‘SenchaApp’,
requires: [
‘Ext.MessageBox’
],
controllers:[‘UserController’],
views: [
‘Main’,
‘UserListView’, ‘UserDetailView’
],
models: [
‘UserModel’
],
stores: [
‘UserStore’
],
launch: function() {
// Initialize the main view
Ext.Viewport.add(Ext.create(‘SenchaApp.view.Main’, { fullscreen: true }));
}
});
In the snippet above you can see it starts with Ext.application that extends to the main application class of the Sencha Touch framework. Next you can see the name where we can specify any name or the name of the application. This name is useful for organizing your other classes in the namespace hierarchy. This app.js is the core file and contains information about all Views, Models, Stores and Controllers. When we specify this attribute here then we need not to refer our other classes on the HTML page, this attribute automatically downloads all the classes in the client browser. If you have a other script file and need to download them then you can specify those files in the requires attribute that will do rest of the work for you.

Next here we have a launch function with the entry point for our application. Here we are creating an instance of our Main View and adding it to the view-port. Next we will create our Main View. Here you can see how we have instantiated the Main View using the proper namespace. This specifies that in our View folder we have a file name called Main.js. From now onward we will use this for our Store, View, Models and Controllers.

Create Main View

Our next step is to create a Main View. As I already explained, this Main View is like a Master View that will provide a consistent look to our application. Add the following code to your Main.js file.

Ext.define(‘SenchaApp.view.Main’, {
extend: ‘Ext.NavigationView’,
xtype: ‘main’,
fullscreen: true,
config: {
id:’mainView’,
items: [
{
xtype: ‘userList’,
title:’User List’,
height:’100%’,
}
]
}
});

In the snippet above you can see we have created our Main View. In Sencha Touch whenever you need to create your custom class then user Ext.define with the namespace but make sure when you are defining a class with certain namespace then the file must be available at the location. Here I’m defining the “SenchaApp.view.Main” class and I have this file located in the view folder. Next here you can see we are extending this class from Ext.NavigationView that is the class defined in the Sencha framework from the above statement that is clear that Sencha has a strong inheritance feature of Object Oriented Programming. You can create your own class and can extend other classes from that. Once you have created the class that extends to the navigation view then this will add a default title bar that is sharable with other Views that we will add in this Main View. Here we added a userList type of control as an item in the Main View.

When you create a class and specify xtype for the class then this is your own custom xtype and you can use it whenever you need by simply specifying xtype:’to xtype specified in your classes.

Create User List xtype

In the previous step we created a Main View and added a userList to it as an item so we will create the xtype that is our custom control so add the following code to the UserListView.js file.

Ext.define(‘SenchaApp.view.UserListView’, {
extend: ‘Ext.List’,
xtype: ‘userList’,
config: {
itemId: ‘userList’,
store: ‘UserStore’,
itemTpl: ‘{Name}’
}
});

Here we are creating a list control that extends to the Ext.List control of Sencha framework. You can see in the above snippet that again we are following namespace conventions since well we have a given xtype attribute that we can directly instantiate as we did in our Main View. Since we already know that a List is a data-bound control and requires a data-source hence we have specified the Store property so next we will create a Store.

Create Store

Here we will create a Store that will load the data from the user.json file from the server. So add the following code to the UserStore.js file:

Ext.define(“SenchaApp.store.UserStore”, {
extend: ‘Ext.data.Store’,
storeId: “usersStore”,
config: {
model: “SenchaApp.model.UserModel”,
autoLoad: true,
header: {
“Content-Type”: “application/json”
},
proxy: {
type: ‘ajax’,
url: ‘/users.json’,
reader: {
type: ‘json’,
rootProperty: ‘users’
}
}
}
});

The code above you can understand, it is nothing but creating an ajax proxy specifying an URL and reading the data and filling in the data into the Model. Here we specified the Model also for the Store. We need to tell the Store where to fill the loaded data. So next we will create a simple Model class.

Create Model

Here we will create our data-model class that is extended from the Ext.data.Model framework class. The Model contains only the field’s information.

Ext.define(“SenchaApp.model.UserModel”, {
extend: “Ext.data.Model”,
config: {
fields: [
{ name: “Name”, type: “string” },
{ name: “City”, type: “string” },
{ name: “Points”, type: “int” }
]
}
});

Create Detail View

As per our flow we are opening the detail page when the user clicks on a list item therefore add a Detail View first.

Ext.define(‘SenchaApp.view.UserDetailView’, {
extend: ‘Ext.form.Panel’,
xtype: ‘userDetail’,
config: {
itemId: ‘userDetail’,
title: ‘User Details’,
fullscreen: true,
items: [
{
xtype: ‘textfield’,
name: ‘Name’,
label: ‘Name’
},
{
xtype: ‘textfield’,
name: ‘City’,
label: ‘City’
},
{
xtype: ‘textfield’,
name: ‘Points’,
label: ‘Points’
}
]
}
});

Here the Detail View is nothing but an extension of the from.Panel class of the framework and contains controls like TextBox to hold field information of the Model. While creating your Detail View keep in mind that whenever you want to load Model data into the form the form controls like textboxes and so on must have the same name property as the field in the Model.

Create Controller

Our last step is to create the Controller that is responsible for handling user actions, load Store, binding data to the View and returning the View.

Ext.define(‘SenchaApp.controller.UserController’,
{
extend: ‘Ext.app.Controller’,
views: [‘SenchaApp.view.UserListView’, ‘SenchaApp.view.UserDetailView’],
config: {
control: {
userList: {//add event for the component
itemtap: ‘onUserTap’
}
},
refs: {//this section automatically generates getter and setter method for the component
userList: ‘list[itemId=userList]’,//getUserList() gives user list
mainView: ‘#mainView’,//getMainView() gives main view
}
},
onUserTap: function(list, index, target, record, e, eOpts) {
var me = this;
var nav = me.getMainView();//getter method
//create model add data here we get the record from list’s tap event. you can load store seperatly
also
var model = Ext.create(‘SenchaApp.model.UserModel’, {
Name: record.data.Name,
City: record.data.City,
Points:record.data.Points
});
//create new detail view
var userdetailsView = Ext.create(‘SenchaApp.view.UserDetailView’);
//set created model with data to newly create view
userdetailsView.setRecord(model);
//push this new view to main view
nav.push(userdetailsView);
}
});

In the above snippet we defined our own Controller class by extending the app.controller of the framework. The Controller contains the information about the Views and Stores. Next in the config section of the Controller class you can see we have given control and refs attributes that are useful to identify the control in the View or the View itself. As you can see we have given a ref to “list[itemId=userList]” that is nothing but our list view that we defined earlier. As you know the list has a data-bound control and has multiple events so in the control section we used the same selector name to specify what action needs to fire when the list item has been tapped. Here when we define the selector it automatically creates getter and setter methods for you. For example here we have used a userList as the selector so we can use the “this.getUserList()” method that will return the list control.

Next you can see we have specified an itemTap event for the list and we specified the function as onUserTap. Now whenever the list item is tapped by the user this function will be fired. This function contains code to create a Model with a record, creates a new Detail View to set this Model to the Detail View and adds a Detail View to the Main View. Here we did not use a Store because we already have data bound to it and in Sencha on any data event in databound controls gives the specific record as the parameter.

Conclusion

In this way we have completed our simple MVC application suing Sencha Touch 2. In the next article we will see how to perform CRUD operations using MVC so stay tuned.

Link gốc: http://www.c-sharpcorner.com/UploadFile/krishnasarala/create-your-first-mvc-application-using-sencha-touch/