Using viewbag pass data to the view and bind it to my dropdownlist.

In my booking view I has a dropdownlist need bind to my database table, In this tast I just use viewbag. I know it is good habit bind the view to your viewmodel, but sometime you need do some nasty thing to get the job quickly done. So here is the code in my controller to retrive the data and pass it to the viewbag.

retrevedatafromdatabses

here I pass to SelectLists to my view.

I my view you just need this one line of code to get it.

@Html.DropDownList(“SydneySuburb”, null, “Select »”, new { @id = “to_suburb” })

@Html.DropDownList(“SydneySuburb”, null, “Select »”, new {  @id = “from_suburb” })

the dropdown is look like this

dropdownlistcontroller

Simple isn’t it!!!

First I tried to do this, I search internet, there are expert write it in very complexed way. The expert alway like to write it like that to make them looking like expert( in my view).

here I just figure it out in very simple way.

Have fun!

JQuery Auto complete work with bakcode by using asp.net mvc

Recently to convert the new website, I have a bookinng form for the clients to finished the booking,there is some exiting data need to using auto complete. In the past I alway use ajax tool control kits to achieve that result. But now I am kind of fun for JQuery. Here is the Jquery Autocomplete textbox

First I have databses contain all the subuerbs, here is my database table.

databaseSuburbs

here is my action in my BookController:

databseJasonResult

I let it return json because json is the fast and easy analyse data at moment.

Then in your view , just add the reference to JQuery UI:

autocompleteJqury

You could ignore the timepicker.min.css, and timepicker.min.js, I use it to picker up the time, for autocomplete don’t need those two references.

here just in you view you just need one more line.

@Html.TextBox(“SearhToSuburb”, null, new {type=”text”,@class=”form-control”, @id = “search_to_suburb” })

That’s it. Simply isn’t it. Have fun. Below is what will it looking like.feels

Royale Coach – ASP.net MVC website Royale Airport Shuttle Transfers

Recently task is to convert the one of old version of our company webstie to asp.net mvc website.The old version has been done by using tranditional asp. And the appearance also don’t looking good.

The new version detective it is desktop or mobile, so the navigation and the contact page will display different in mobile device open it.

Finally get a new appearance done. And hosting it in windows Azure, I have done the most important part.The Book page will have all the function, this still in proceeding.

Here is the first Windows Azure website build by using asp.net mvc, Bootstrap,jQuery,the contact form validation using Ajax. (the booking page In proceeding)
http://royaleapp.azurewebsites.net/

royaleCoach

Using two Way Adding “active” tag to your navigation list in an asp.net mvc Layout page

Recently my task need convert this website http://www.royalecoach.com.au/royale.asp (this is wrote by using classic asp) into asp.net MVC.

First I need to create a layout.cshtml for my the new version of this website.Then navigation need add a class named active to it when the action method has been called.

The first way is very simpley, you could wirte a logic to your view, here is one solution:

addClassNametoLi

But the rule of MVC is the view must be simply as possible, I don’t like this nasty and yuck c# code sit in there. So there is a way just by write a CustomHtmlHelpers to improve it.

here is my class file:

htmlHelper

 

Then in your layout page ,your could use it like:

layoutMenu

That’s it. By the way, I am using asp mvc4. Hope that could help some one else.

Have fun:)

End to end web app in under an hour–Part 1

Originally posted on Jeremy Howard:

Here is the video tutorial that goes with this post:

Here’s how to create a complete web app in under an hour. We will (naturally!) create a todo app. The features:

  • Create, update, delete a todo
  • Sort (and show sort order)
  • Search
  • Pagination

We’ll try to make it somewhat user friendly, e.g.

  • Date-picker widget for todo due date
  • Enable/disable buttons as appropriate for context

Our infrastructure will be:

  • Backend Language: C#
  • Backend Framework: WebApi
  • Database: SQL Server (including SQL Express LocalDB during development)
  • ORM: Entity Framework Code First + Migrations
  • Frontend Framework: AngularJS
  • CSS styles: Bootstrap
  • IDE: Visual Studio + Resharper
  • Hosting: Appharbor

As you’ll see, this particular choice of tools is well suited to rapid application development, and is also very flexible.

The goal is not just to throw together the minimal necessary to have something working, but to create a really flexible infrastructure that we can use as…

View original 1,127 more words

Basic struction — create Database first ASP MVC Application(Models in three way)

Here in the internet have a lot tutorial introduction about create code first asp mvc application, but in the real life world the database always aready is exsiting. I am not mvc experter, I am fresher now. It took me a while to get the basic struction a while.So I like to write it down wish this could help some people like me struggling in the beginning.

OK, let me asume that we are going to create a online store ecormmerce website.

Way one: basic struction

Then you create a new MVC project through VS2013, first thing is add a connection string to your root web.config file.

It is like this:connectionStr

Modelsisnothingjustclassfile

Models is nothing just class file. You map your table to class file, then when you create a controller you could select strongly type.

finally is the Add one line to Global.asax to stop populater some seed data

GlobalNeedAddOneLine

See the null meaning don’t popular seed data.

Way two: basic struction(Models is another project)

I won’t talk about the controller or the views. But Models could anything, Web services, WCF and don’t sit in your project, the model is not neccessary sit in your project.So your project only have controller and Views, but the Models is independent. Here is a simple practise I did in my Demo struction is like this:

separateModelMvc

Way three: basic struction(Model is your entity Framework)

MvcEntityFrameworkStruction

Create marquee news in front page and the news is read from the database with expired data,also included management page to insert news

My boss just saw other company website has a marquee new on the front page, so she asked me if I could make one and arrow her to insert news and the news will dispear at the expired data.

For achieve that task, first I create a table in my database table, here is my table:

breadNewTable

then I write a store proceedure, a little tip for fresh guy, alway use store preceedure to insert data for security reasons.

breadNewStoreProceedure

Now, We could start the front end job. I create a user control:marquee.ascx(so you could put it in anyway you like), to display the new, here is my html code:

frontUCmarquee

here is the backcod, I used ado.net to open the database and qurery what I need, and bind it to my BulledtedList:

databasereadertomarquee

See the code this if(!IsPostBack) is not neccessary, but I use web froms so it wil inherit maintain state so I don’t need retrieve database everytime postback.

here I am also happy to share the css file for style this unorder list to display inline:

MarqueeCssStyle

A tip for fresh guy, put this in the page your use control will stand it.

Now, you just need drag the usercontrol to any page you want it with this css style in top of the header it. You coud see it.

Then We could start create a page to arrow my boss to insert the bread news, I used boostrap format so it save my time to write css. here is the front page look like:

addNews

here is the html code:

htmlCodeAddnews

The form use jQury Validate, the jquery-ui.js, is for my boss click then will pop up the jQuery calender to arrow her to put the expired date. So simple isn’t, I am love JQure very much, save a lot of time. It remind me when I first time write javascript over 10 years ago, for every simply function I need write a lot codes.

Finally I just need write a event could be fired by this button.

storeIntodatabase

Ok, That’s all. Have fun!

Using c# code to force bootstrap modal stay open after page postback

Recently I write a small function into my asp.net application.To enable the driver to input the time the submit the pick up client and drop off the client time.
My boss like the pick up time and drop off time should been populate by just click.so I write a code on the back of page to retrive the time every time the driver click the button.
But the dropoff button driver me to nuts,Because When the dropoff button click I pop out the bootstrap modal.But the problems came out this button need make page postback to retrive the current time and after postback my modal need stay open.
It take me a while to fix out this.
Here is my solution.
first, I need write javascript like this is for to open the modal: #dropoffModal is my hidden modal.

 function openModal() {
$('#dropoffModal').modal({ show: true });
}
 

Second I have the the button is like this(See the button click will fire a event named:”Button_DropOff_Click” behind it):

 button_click_event_fire_javascript

Finally, just write your event on the page behind file:


protected void Button_DropOff_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}

here just a solution. by the way, You could use ScriptManager.RegisterStartupScript() this command call another function in your frond page javascript.

How to create Picture Upload by using ASP MVC 4

This is a very simply example for how to using asp MVC. In this example doesn’t involved with your database. So start from create a model here is your code for your picture upload model. model is cs file, so save below code as PictureModel.cs


using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace MvcDemo.Models
{
    public class PictureModel
    {
        [Required]
        public HttpPostedFileBase PictureFile { get; set; }
    }
}

Then create a action event to your Controller. Controller also just cs file, so save below to one of the Controllers file


//by default, this will be called by get 
public ActionResult PictureUpload()
        {
            return View();
        }

here is the view file code. view is the PictureUpload.cshtml


@model MvcDemo.Models.PictureModel
@{
    ViewBag.Title = "Picture Upload";
}


Picture Upload

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = “multipart/form-data” })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true)

PictureModel 

@Html.LabelFor(model => model.PictureFile)

 

@Html.TextBoxFor(model => model.PictureFile, new { type = “file” }) @Html.ValidationMessageFor(model => model.PictureFile)

} @section Scripts { @Scripts.Render(“~/bundles/jqueryval”) }

After submit, it will call the post, below is the action event for post


[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult PictureUpload(PictureModel model)
        {
            if (model.PictureFile.ContentLength > 0)
            {
                var fileName = Path.GetFileName(model.PictureFile.FileName);
                var filePath = Server.MapPath("~/Content/Uploads");
                string savedFileName = Path.Combine(filePath, fileName);
                model.PictureFile.SaveAs(savedFileName);                
            }
            return View(model);
        }

Best Web Design, web developer, php developer,designers,freelance

Follow

Get every new post delivered to your Inbox.

Join 92 other followers