Jun 8, 2011

Part 3: Create Dynamic Partial View on MVC 3



Partial view in MVC 3 basically used as a reusable view.  For PHP programmer, partial view is like an include that can be reused when needed.  Partial view could served one purpose or multi purpose depending on your skills.

For example, the picture below show that a form to add new company(based on Part 2 tutorial) popup once user click on Add button.  It's like the form being called once user clicked the button, but the truth is the form already loaded along with the Index.cshtml.  When user click the button, an onClick function trigger and display the form as popup.  That's the magic of AJAX which can easily implemented with MVC 3.

Ajax call form and display as popup on MVC

In this tutorial, I will write on dynamic partial view. My tutorial will create two partial view, but will only be visible on user request.  This tutorial will be using a bit of Ajax.  So, let's begin our MVC adventures..

During Part 2, I have covered on how you could make a new Models to manipulate objects which is also known as Data Transfer Object.  In this tutorial, I will not cover on models, so I'll just proceed with this tutorial goals.



(For those who would like to skip past tutorial, and still wanted to follow my guide, feel free to download Part 2 source from here)

Lets create the view.  In this tutorial, I'll make 5 partials view.  One will be view by default when the page load, while the other four will be displayed once we click a link.  Below is what I have for my partials code:

Partial that will be load by default:

// filename _DefaultPartial.cshtml

This Partial is being viewed by default

I am located in div with id=right-box and class=data

The other partials

// filename _Partial1.cshtml

You just click Me~!

PARTIAL 1 LOADED

// filename _Partial2.cshtml

You just click Me~!

PARTIAL 2 LOADED

// filename _Partial3.cshtml

You just click Me~!

PARTIAL 3 LOADED

// filename _Partial4.cshtml

You just click Me~!

PARTIAL 4 LOADED


So to hold and display all the partial, we need a view page. For this tutorial, I'll make a new Controller name Tutorial2. This is my Tutorial2 Controller code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DataTableEditable.Controllers
{
    public class Tutorial2Controller : Controller
    {
        //
        // GET: /Tutorial2/

        public ActionResult Index()
        {
            ViewBag.MenuTitle = "Please Click to See Changes";
            ViewBag.SectionTitle = "Please look at the changes below";
            return View();
        }

        [HttpGet]
        public ActionResult _PartialPick(int id)
        {
            if (id.Equals(1))
            {
                return PartialView("_Partial1");
            }
            else if (id.Equals(2))
            {
                return PartialView("_Partial2");
            }
            else if (id.Equals(3))
            {
                return PartialView("_Partial3");
            }
            else
            {
                return PartialView("_Partial4");
            }
        }
    }
}

As you look from my controller codes, I have a specific function name _PartialPick with abilities to accept one argument by http GET. This function will pick the appropriate partials according to parameters received. You could always code it in better way :-)

So we leave the controller for now, and we will now create the main view which will hold all the partial through [div class="data" id="right-box"][/div] where the partial will take this div as its container.


Since blogger editor is not friendly enough to display my codes, so i'll attached a picture of the code. To grab the code, you could visit this link. That's all for this tutorials.  But before I forget, this tutorial need to have a little bit of javascript function.  So we will use $.get function to send and call _PartialPick method in controller. You could embed the javascript below before the tag in main view files(Index.cshtml in my case).



And that's all for the codes.  Now to run our application, simply press F5 on the keyboard and it will compile and run on the default browser.  Once displayed, make sure that you change the URL to

http://localhost:portnumber/Tutorial2/

By default the browser will directly choose Home Controller to be displayed by default. So, Just play around and feel free to have a look or download the source code from GitHub.

Blogger Labels: Partial,purpose,example,Part,tutorial,user,truth,Index,AJAX,objects,Data,Transfer,Object,code,_DefaultPartial,Controller,System,Generic,Linq,DataTableEditable,ActionResult,ViewBag,MenuTitle,Click,SectionTitle,View,HttpGet,_PartialPick,Equals,PartialView,argument,container,method,files,keyboard,Once,Home,Just,GitHub,skills,goals,Collections,Controllers,codes,parameters,tutorials,cshtml,download,partials,filename,javascript,browser


Thank you for your unbelievable support on Negative Zero - Permission to read and write blog for nearly 4 years. Don't forget to like Negative Zero on Facebook.
Blogirific.com Blog Directory





Post(s) you might like to read :

Comments
0 Comments

0 comments:

Post a Comment