Twitter Bootstrap: Drop down list + Modal

How to combine the uses of  drop down list and modal together?

Let’s say we got a drop down like the following

<ul class=”nav nav-pills”>

<li class=”dropdown”>>

<a class=”dropdown-toggle” data-toggle=”dropdown” href=”#” id=”dLabel” role=”button”>Index one<b></b></a>

<ul class=”dropdown-menu” role=”menu” aria-labelledby=”dLabel”>

<li><a tabindex=”-1″ href=”#” data-target=”#modal” data-slide-to=”0″>Index one</a></li>

<li><a tabindex=”-1″ href=”#” data-target=”#modal” data-slide-to=”1″>Index two</a>




Say you have a modal like the following:

<div id=”modal” class=”carousel slide” data-interval=”false”>

<ol class=”carousel-indicators”>>

<li data-target=”#modal” data-slide-to=”0″></li>

<li data-target=”#modal” data-slide-to=”1″></li>


<div class=”carousel-inner”>

<div class=”active item”>

Item One


<div class=”item”>

Item Two



<a href=”#modal” data-slide=”prev”>&lsaquo;</a>

<a href=”#modal” data-slide=”next”>&rsaquo;</a>


To update your selected text with drop down

//bind the slid even

$(“#menu”).bind(“slid”, function () {

//update the label with modal selected index read from the drop down list index

$(“#dLabel”).html($(“.dropdown-menu li a[data-slide-to='” + $(“.carousel-inner .active”).index() + “‘]”).text() + “<b class=’caret’></b>”);


Entity Framework: Dynamic Sorting


Sorting and paging on a ASP grid with Entity Framework data source


we can’t do that as simple as the following:



Lets say we have the class like the following in Entity Framework:

public Project {

int ID {get;set;}

string Name {get;set;}


We need to write our custom Expression to achieve the sorting, and let’s say we just want to order it by ascending for now.


public List<Project> GetProjects(int startRowIndex, int maximumRow, string sortParameter) {

//Default Sorting, sort by Project ID

Func<Project, object> orderExpression = p => p.ID;

switch(sortParameter) {

case “Name”:

orderExpression = p => p.Name;



using(var context = new xxxEntities()) {

//Order by sort expression, skip x number of rows, take the current page size of entities

return context.Projects.OrderBy(orderExpression).Skip(startRowIndex).Take(maximumRows).ToList();




WCF & AJAX: My submitted changes does not update in IE but on other browsers

My view doesn’t get updated when I submitted data through WCF service in IE with jQuery $.getJSON, $.ajax, etc…

But it works in chrome, Firefox, etc…


Because by default in IE, all the service request will get cached in the browser.


We need to force the browser to not to do any caching on with ajax call in jQuery

  1. To do it globally, add the following line when document ready, $.ajaxSetup({ cache: false });
  2. To do it specifically within the method

url: url,
type: “POST”,
cache: false,
contentType: “application/json; charset=utf-8”,
data: data,
dataType: “json”,
success: function (data) {

error: function (msg) {