Tag Archives: Menu

Menu

[RESOLVED]High traffic system: would you rewrite with asp.Net MVC, a more minimalistic framework, or no framework at all?

I am aware that stackoverflow runs on MVC. But when they selected MVC they were just starting out and development productivity was their prime concern to get something out the door as quickly as possible, so they chose the framework they were most familiar
with.

They had no idea their system would grow to have so much traffic.

Now that they have to carry this huge h/w and network infrastructure to support their voluminous traffic, the question is if they were to rewrite their system now, knowing their current infrastructure costs, would they still happily choose asp.Net MVC?

It’s easy to say just slap on a load balancer and a bunch of servers, and MVC will scale up as large as you like. That may be true, but it gets expensive. Each new server costs money per month.

If I’m looking at two approaches, and one has a maximum throughput twice that of the other, it will require (I know this is oversimplified, but… in theory) half the servers to run.

If you want to rewrite a large existing system, that you already know has high traffic, and you can find an approach which can cut your h/w infrastructure costs in half or more, it’s something to think about.

No one can say there is no overhead price to using asp.Net (MVC or webforms). To keep things general and productive for developers, a lot stuff has to go on in the framework, and that adds overhead, which translates into higher infrastructure costs.

So, what would you use to rewrite a large, heavily traffic’ed existing system? MVC, or a more minimalistic framework, or no framework at all approach?

Ideally you want to use a framework that’s been tried and tested. You also want compiled/managed code. That doesn’t leave a lot of choices. You can run MVC on Unix under mono which can help keep costs low, and the next version will run on other platforms
natively.

keym6

They had no idea their system would grow to have so much traffic.

Stackoverflow was set up with the intention of generating as much traffic as possible, so that they could generate as much money as possible.

keym6

Now that they have to carry this huge h/w and network infrastructure to support their voluminous traffic,

They also generate large revenues from the site.

keym6

So, what would you use to rewrite a large, heavily traffic’ed existing system? MVC, or a more minimalistic framework, or no framework at all approach?

in my professional life i fix perfomance problems in projects like 90% of the time. and personally i would say for a site like stackoverflow,

go with MVC (asp.net or ruby) with a mongodb dal. this should be able to handle a massive load without using too many resources. 

before I changed a site to a new framework, I’d use performance metrics to see what percent of the performance overhead the framework contributed. I’d assume that in stack overflow for example, the MVC framework is probably about 1% to 10% of the cpu overhead,
so switching to a framework that was twice as fast, would cut a server farm of 10, by maybe 1 server. 

your performance bottlenecks should be your application code, not the framework. if the framework is using too high a percent, then look at another framework. if your site is just static pages, then asp.net will add a high overhead. But if your site has
a fair amount of application code, then it makes more sense.

also the framework is a very small part of the performance problem, there is payload size, how many requests your pages requires, network bandwidth, etc. for example the main evil in web forms was the viewstate adding to the payload. turning viewstate off
(a standard for any high performance site), still left a residual payload. if after tuning this payload was a major cost, then switching framework might be an option.  

you should pick a different framework because you can deliver faster with it, manage the code changes better, and hire staff.

 

looking at stack overflow, their main performance problem should be storing, retrieving, searching and sorting the articles. the cost of the UI layer (MVC) should not even enter into it. because they have large payloads, network bandwidth is probably next
(or maybe first). 

also never under estimate opportunity costs. if switching frameworks saves a server (20 – 80k), but delaying projects by only 10% (even a small team will have a burn rate of 4-10K a day), you may be losing big.  

keym6

So, what would you use to rewrite a large, heavily traffic’ed existing system? MVC, or a more minimalistic framework, or no framework at all approach?

I’d find out where the bottlenecks are and target those.  Given the sites I am typically involved with which rely on a CMS, or an indexing solution, or database, or web services, or often all of the above, I doubt the time it takes MVC vs WebForms vs Something
else to serve up the html has any significant bearing on the performance.  The CMS I use comes with profiling tools that shows you the time it takes to render each component.  A component that does nothing, takes nothing.  At most you are hitting a database
though the heavily-cached CMS API and you’ll see milliseconds here and there.  Look at a component that retrieves a basket and computes discounts and taxes on the fly, or a component that instigates a search of relevant products using a REST API, or shows
the child items of the immediate page as a menu, and now you’re seeing hundreds of milliseconds.  If MVC vs webforms saves me 1ms, I don’t really care…I want to get those hundreds of milliseconds down to tens of milliseconds and framework alone isn’t going
to do that.

If you re-write an entire site thinking one presentation framework is going to give you noticeable results over another, then you’re heading for a very, very, very expensive disappointment.

The app code plays very little part in serving cached pages. It’s all framework. That’s why I am interested in the framework overhead. Our pages don’t change much so they are almost always served from cache (once initially created).

WebForms and MVC will use the same caching framework underneath, you just access it via different tags.

[RESOLVED]Using col-sm & col-xs without specifying the senario for the large screen

I have the following code inside a web template that i am using :-

</div>
<div class="row panel">
<div class="col-sm-3 hidden-xs">
@Html.Action("Menu", "Nav")
</div>
<div class="col-xs-12 col-sm-8">
@RenderBody()
</div>
</div>

but now i got confused on how the two divs will display in a full screen (large screen), as i understand the markup as follow:-

- the Menu will be hidden on X-small screens and occupy 3 columns on small size,, but what about large screens ?

- the RenderBoy will occupy 12 in x-small screens and 8 in small but what about large screens ?

Can anyone advice ?

Thanks

if you look at the break points in the documentation for Bootstrap it shows that the classes "cascade" up so if you only set the col-sm-8 it is also then col-md-8 and col-lg-8 without specifying it.

http://getbootstrap.com/css/

hope it helps

Hi john,

First, please refer to remojr76’s reply

Secondly, base on http://getbootstrap.com/css/#grid, it says that:

•Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Best Regards

Starain Chen

[RESOLVED]HTTPPost model binding not working

Model

Public Class CategoriesEditViewModel
    Public Property Categories As List(Of cihCategoryOrgDef)
    Public Property Category As cihCategoryOrgDef
    Public Property lists As cihLists = New cihLists()

    Public Property SelectedItem As String
    Public Sub New()

    End Sub

    Public Sub New(codId As Guid)
        SelectedItem = codId.ToString
        lists.loadCategoryOrgDef(ZenCommon.CurrentOrgId)
        lists.loadClubWaivers(ZenCommon.CurrentOrgId)
        Categories = lists.organizationClubCategories
        Category = (From x In Categories
           Where x.codId = codId
           Select x).SingleOrDefault()
    End Sub
End Class

Controller

<HttpGet>
Function Edit(codId As Guid) As ActionResult
    Dim model As CategoriesEditViewModel = New CategoriesEditViewModel(codId)


    Return View(model)
End Function

<HttpPost>
Function Edit(category As CategoriesEditViewModel) As ActionResult

    If ModelState.IsValid Then
        'make change to DB
        Return RedirectToRoute("club_category_list")
    End If

    Return View(category)
End Function

Edit Page View

@ModelType CheckImHereMVC.CategoriesEditViewModel

@Using Html.BeginForm()
 @<fieldset>
    @Html.EditorFor(Function(m) m.Category.codDescr)

    @Html.DropDownListFor(Function(m) m.SelectedItem, New SelectList(Model.lists.organizationClubWaivers, "waiverId", "waiverName", Model.lists.organizationClubWaivers))
 

<input type="submit" value="Save" /> </fieldset>
End Using

The

HTTPGet

Edit page works fine. It goes to a url such as

categories/edit/1

and gives me the correct information corresponding to that particular Category

However, when i change some data, and click the

Save

button. i am redirected to the

HTTPPost

Edit function, however my ‘category` (value being passed in) is completely blank.

What am i doing wrong?

maylortaylor

, however my ‘category` (value being passed in) is completely blank.

Please show how the category is displayed in the View

I dont understand what you want?

I gave you my HTTPGet Controller method that creates the "Edit.html" page.

Once i run the project, go to the Edit page, the information pulls up fine on the screen. If i change the information (dropdown menu) and click the ‘save’ button. I am first redirected to the
CategoriesEditViewModel where it goes to the "Public Sub New()" empty constructor and then it goes to my HTTPPost Edit_Post ActionResult on my
CategoriesController.

Once it does get to the HTTPPost ActionResult, the value being passed in ("category As
CategoriesEditViewModel") has the following info:

Categories = Nothing

Category = nothing

Lists = nothing

SelectedItem = nothing

When Posts return "blank" stuff for fields even though the original View sent out showed something or the user changed a value….. the root cause is related to how MVC works and how the data was posted back.

  1. MVC doesn’t really pass strong typed objects back and forth, rather is passes querystrings as posts or gets.  Query strings are just Name/Value pairs…  
  2. When a post happens MVC will try to match the ActionMethod’s parameter type.  It does this by first creating a null instance of that type and then it tries to "plug" the values with the query string values posted back.  This
    means that the "Name" of the query string values becomes highly important.  If MVC cannot find the name of something in the object it creates in the query string it correctly does nothing!  No errors, nothing, it just leaves those things as they were at creation.
  3. The symptom could be "I see it in the view" but can’t see it as soon as it gets back to my controller’s action method…
  4. Solution:  take a very close look after the original view is created what names are given to the html tags and make sure your begin-form includes them on the post back.  Otherwise you will think you are "missing data".

This is the html being created for my ‘EditFor()’

<input class="text-box single-line" id="Category_codDescr" name="Category.codDescr" type="text" value="Academic" />

On the action method handling the post put a break point at first line and tell us what values are being passed in.  You should be able to locate one for Category_codDescr.  If you can’t then the form isn’t posting this back properly.

just wanted to see the html that is generated by  the

@Using Html.BeginForm()
 @<fieldset>
    @Html.EditorFor(Function(m) m.Category.codDescr)

    @Html.DropDownListFor(Function(m) m.SelectedItem, New SelectList(Model.lists.organizationClubWaivers, "waiverId", "waiverName", Model.lists.organizationClubWaivers))
 

<input type="submit" value="Save" /> </fieldset>
End Using

Also, please tell what are Request.Form collection variables in the POST Action

maylortaylor

I dont understand what you want?

I gave you my HTTPGet Controller method that creates the "Edit.html" page.

Once i run the project, go to the Edit page, the information pulls up fine on the screen. If i change the information (dropdown menu) and click the ‘save’ button. I am first redirected to the
CategoriesEditViewModel where it goes to the "Public Sub New()" empty constructor and then it goes to my HTTPPost Edit_Post ActionResult on my
CategoriesController.

Once it does get to the HTTPPost ActionResult, the value being passed in ("category As
CategoriesEditViewModel") has the following info:

Categories = Nothing

Category = nothing

Lists = nothing

SelectedItem = nothing

show the Category class. what the binder is trying to do with the post data is:

var model = new CategoriesEditViewModel();
model.Category = new cihCategoryOrgDef();
model.Category.codDescr = Request.Form["Category.codDescr"]; // will add convert to type code

[RESOLVED]Load partial view on the right hand side panel of the main view

HI ,

I am having a main view,, which is divided into 2 sections. Leftpanel with links and right panel with a div.

When i click each link in the left side menu it should render the corresponding partial view in the div in the right side panel.

PLease find my code

Main page

@{
    Layout = null;
}
<link href="~/css/Admin.css" rel="stylesheet" />
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ADMIN PAGE</title>
</head>
<body style="background-color:#bfd0e4;">
     <table style="width:100%;height:100%;">
          <tr style="vertical-align:top;">
               <td style="width:60%">
                       <div id="RenderHere">
                         
                    </div>
                  </td>
               <td class="middletd">
                    <img src="./Images/blue_overlay.jpg">
                </td>
                <td style="width:60%">
                    <div>  
                        <table style="height:60%">
                            <tr>
                                <button id="doctors">Doktori</button>
                                <button id="apointments"> Pregledi</button>
                            
                            </tr>
                        </table>             
                    </div>
                 <div class="holidayinn"><img src="./Images/holiday_club_logo.png"></div> 
            </td>
        </tr>
    </table>
</body>
</html>

Here two buttons are there.

I am having a partial view named _branchpartial.Its a partial view which lists some data from the db which again pouplates modal dialogs.

But here when i clcik the first button it should display this partial view(_branchpartial) in the div "RenderHere". And i need to pass the model also.

In the controller i have already written Actionresult and created partial view as follows

public ActionResult Branch()
        {
            model= new TrackerModel();
             // List<BranchModel> filterdBranchData = null; 
              try
              {
                  model.branchData = this.ppiService.GetBranchData();
                 // filterdBranchData = model.branchData.Where(item => item.IsDisabled.Equals(false)).ToList();
               
              }
              catch (Exception ex)
              {
                  logger.Error("error occured", ex);
              }
              return View(model.branchData);
        }

Please help me to find a solution. I need to open the partial view in the div when i click the first button.

Can i use ajax method? if so how?

How can i call the Action "Branch"  from the button?

Thanks,

Vidya

Please take a look at Ajax.ActionLink. It solves your problem

Ajax.ActionLink and Html.ActionLink in MVC  (please scroll to the middle of the page)

[RESOLVED]Programmatic setting 'selected' in SelectListItem not rendering

This is seriously aggravating. I’ve been working with a multi-select control via the Chosen jQuery plugin. It posts values to the server I can save, no problem. The problem comes when I need to set the values of the items that were already selected, and
send that to the view for rendering – it’s not selecting the item(s).

I even set a breakpoint at my call to the Html.DropDownListFor helper to check out the values, and my chosen SelectListItem’s selected property is set to true, so all should be good. But of course it’s not. The select element is rendered without any of the
options being selected. Can anyone explain to me why a List<SelectListItem> with one or more of the items set to Selected = true would instead set none of them to true?

I actually encountered this issue fairly recently and although I don’t have the code available at hand, I remember having to rely on the rarely seen

MultiSelectList class
as opposed to the traditional SelectList to handle setting the values within the Controller :

// Set your selected values and populate your entire MultiSelectList
ViewBag.YourOptions = new MultiSelectList(YourEntireCollection, YourEntireCollection.Where(x => YourSelectedCondition));

And then within the View, I believe I didn’t rely on the DropDownListFor() Helper and simply iterated through the values in the ViewBag :

<select id='YourPropertyName' name='YourPropertyName' class='chosen-select>
    @foreach(var item in ViewBag.YourOptions)
    {
         <option value='@item.Value' @(item.Selected ? "selected" : "")>@item.Text</option>
    }
</select>

I’ll see if I can dredge up the related code sometime tomorrow, however if timing is an issue, you might consider looking through some
similar discussions like this or

this other one
, which both rely on the ListBoxFor() Helper method as opposed to the DropDownListFor().

Looks like for Chosen you need to pass the values as array

$("#dropDownId").val(["130860","130858"]);
$("#dropDownId").selectmenu('refresh');

Please take a look at this stack overflow

http://stackoverflow.com/questions/6966260/jquery-multiselect-set-a-value-as-selected-in-the-multiselect-dropdown

An example using it for Artist Tags:

View Model:

public class ArtistViewModel
{
    public Artist artist { get; set; }
    public MultiSelectList PossibleTags { get; set; }
    public int[] SelectedTags { get; set; }
}

Controller:

public ActionResult Edit(int id)
{
    var model = new ArtistViewModel();
    model.artist = db.Artists.Find(id);
    
    if (model.artist.ArtistTags.Any())
    {
        model.PossibleTags = GetPossibleTags((from p in model.artist.ArtistTags select p.TagId).ToArray());
    }
    else
    {
        model.PossibleTags = GetPossibleTags(null);
    }

    return View(model);
}

private MultiSelectList GetPossibleTags(int[] selectedValues)
{
    return new MultiSelectList(db.Tags.OrderBy(o => o.Name).ToList(), "TagId", "Name", selectedValues);
}

View:

@Html.ListBoxFor(m => m.SelectedTags, Model.PossibleTags)

This example uses a View Model, but you should be able to figure out how to dump in in your View Bag, if so desired.  I think it would be easier if you used a View Model as this example uses.

[RESOLVED]MVC Partial View

Hi,

I am quite new to MVC etc. I want to know something on postings by partial views.

I have a page which has a graph on. The graph is generated by a partial view. Now what I want to do is have date ranges in which the user can select to display data for.

But when I do a post from the form on the partial view, it just basically goes to a view displaying the graph only, and also removes the my form tags.

Any help would be appreciated in getting what I need (VIA Jquery might be the way?)

Thanks

Kobie

You may want to use the Ajax-Form helper to post your form and retrieve a new partial view (with your graph) and replace your old graph

@using (Ajax.BeginForm("GetGraph", new AjaxOptions { HttpMethod = "POST", TargetUpdateId = "graphDiv" }))
{
  Date From: @Html.TextBox("DateForm") <br />
  Date To: @Html.TextBox("DateTo")

  <input type="submit" value="Submit" />
}


<div id="graphDiv">
  // your graph goes here
</div>

The above uses the ajax form helper, specifying the graph’s div container for where we want to insert the new graph (based on the date fields).

The graph action:

[HttpPost]
public ActionResult GetGraph(DateTime DateFrom, DateTime DateTo)
{
  var graphData = /* use the date params above to generate your graph's data */;

  return PartialView("GraphPartial", graphData);
}

All this action does is it takes your date fields from the form and uses them to generate your graph’s data.  Then we pass that data to our graph’s partial view.  You’ll need to specify the name of that partial view (I used ‘GraphPartial’)

Last little note: in order to use AJAX, you’ll need to include the jquery and ‘unobtrusive-ajax’ scripts in your View.  They should be located in your /Scripts folder just like any other jquery script.  If you don’t have the unobtrusive-ajax script, it can
be downloaded using the NuGet Package Manager for your project (under Tools menu).

Hope that helps

Hi,

Exactly how I want it, I will try and let you know of the results.

Ok no luck, it still throws away my the rest of the page and then just displays the graph, but now with no data. :(

main view :

//Think its got something to do with this.

@using (Ajax.BeginForm("LeadChart", "Chart", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "myGraph" }))
{ 
<div>@Html.TextBoxFor(x => x.ChartData.DateFrom) </div>
<div>@Html.TextBoxFor(x => x.ChartData.DateTo) </div>
<div><input type="submit" value="Get data" /></div> 
}

<div id="myGraph">
         @{ Html.RenderPartial("LeadChart", Model.ChartData);}
</div>

Leadchart controller:

//So this works fine

[HttpPost]
public ActionResult LeadChart(Chart chart)
{
     chart.DateFrom = Convert.ToDateTime(chart.DateFrom);
     chart.DateTo = Convert.ToDateTime(chart.DateTo);
     var data = chart.ChartData; 
     return PartialView(chart);
}

1) change your form-action to not be the same name as the partial view

@using (Ajax.BeginForm("GetLeadChart", "Chart", ....

2) update the action name to reflect this change

[HttpPost]
public ActionResult GetLeadChart(Chart chart)
{
...

3) did you mean to use data instead of "chart"?


return PartialView("LeadChart", data);

4) lastly, if after posting, your view changes to just the partial chart view, it means your AJAX is not working.  If it’s not working after these suggestions, please post your View’s HTML source

Hi,

Hehehe so stupid mistake on my side. My Jquery was outdated…

Thanks a lot for the help!!Embarassed

[RESOLVED]Menu items posting to correct URL

I have a menu that is database driven.  Each item in the menu is a row in the database.  There is a column for the URL’s.  Question is how do writ code it the controller or a class so the the item in the menu, when clicked on send you to the correct URL?

Hi bthJ6,

Thanks for your post.

There’s a sample,you can refer to the following link:

#Dynamic Menus in ASP.NET MVC 4 using EF Code First and jQuery

http://www.dotnetcurry.com/showarticle.aspx?ID=811

Hope this can be helpful.

Best Regards,

Eileen

[RESOLVED]Error in Sending Data to a Page

Guys, I made this navbar in my layout that takes the items from Database.

<ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    @foreach (var item in db.Categories)
                    {
                        <li>
                            @Html.ActionLink(@item.CategoryName, "Category", "Home", new { id = item.CategoeyId })
                            <ul>
                                @foreach (var subcategory in db.SubCategories.Where(x => x.CategoryId == item.CategoeyId))
                                {
                                    <li>@Html.ActionLink(subcategory.SubName, "Content", "Home", new { id = subcategory.SubId })</li>
                                }
                            </ul>
                        </li>
                    }
                </ul>

but in this line:

@Html.ActionLink(@item.CategoryName, "Category", "Home", new { id = item.CategoeyId })

it doesn’t send the id like:  Home/Category/id

it sends the Home/Category?Length=4

What is the problem in my Routings?

max-designer

@Html.ActionLink(@item.CategoryName, "Category", "Home", new { id = item.CategoeyId },null)

@foreach (var item in db.Categories)

Can I change it into something like this: 

@foreach (var item in db.Categories.Where(x => x.MenuOption == true))

or Something like it?

Of course. However, it is not considered best practice accessing database from views