Category Archives: CSS

CSS

[RESOLVED]How to create multi select drop-down using jQuery?

Hi All,

How to create multi select drop-down using jQuery? Please provide some code or link for this

Thanks in advance

Hi,

Try following link

http://api.jquery.com/change/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multi Select</title>
  <style>
  div {
    color: blue;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<select name="Number" multiple="multiple">
  <option>1</option>
  <option selected="selected">1</option>
  <option>2</option>
  <option selected="selected">2</option>
  <option>3</option>
  <option>4</option>
</select>
<div></div>
 
<script>
    $("select")
      .change(function () {
          var str = "";
          $("select option:selected").each(function () {
              str += $(this).text() + " ";
          });
          $("div").text(str);
      })
      .change();
</script>
 
</body>
</html>

Regards,

Ajay

Hi info2ambrish,

Thanks for your post.

The Dropdown list in ASP.NET is used to select a single item from the list. so if you need to imitate the select tag and add the javascript function for multi selected.

But you can use the multi selected jquery plugin for your requirement.

Please double check the following link

http://rvieiraweb.wordpress.com/2013/04/20/mvc-4-dropdownlist-with-multiselect-values/

how to set selected values to a multi select dropdown list on form load in .net mvc

jQuery MultiSelect dropdownlist how to access results?

http://blogs.msdn.com/b/rickandy/archive/2012/01/30/asp-net-mvc-dropdownlist-multiselect-and-jquery.aspx

Hope this can be helpful.

Best Regards,

Eileen

Hi Eileen,

Thanks sharing these useful url and it is very help full for me

You can also check the DropdownChecklist Jquery Plugin

Please see the Sample Implementation code 

<!DOCTYPE html>
<html>
<head>
    <link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css"
        rel="stylesheet" type="text/css" />
    <link href="http://dropdown-check-list.googlecode.com/svn/trunk/src/ui.dropdownchecklist.themeroller.css"
        rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <script src="http://dropdown-check-list.googlecode.com/svn/trunk/doc/ui.dropdownchecklist-1.4-min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#s2").dropdownchecklist({ emptyText: "Please select ...", width: 150 });
        });
    </script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body>
    <select id="s2" multiple="multiple">
        <option>Low</option>
        <option>Medium</option>
        <option>High</option>
    </select>
</body>
</html>

[RESOLVED]Load resources from actions of a controller

Can I load css not like a file foo.com/file.css ? I want to use path like "foo.com/home/index/".

I suppose that you could point to a particular file and then load it when your View is rendered using something like the ViewBag (or Model) :

public ActionResult Test()
{
            // Find the appropriate absolute URL for your CSS file
            var url = Url.Content("~/Content/Site.css");
            // Or fully qualify one from an external, publicly accessible site (Bootstrap example)
            //var url = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css";

            // Build your URL and store it in the ViewBag
            ViewBag.CSS = String.Format(@"<link href='{0}' rel='stylesheet' type='text/css' />", HttpUtility.HtmlEncode(url));
            return View();
}

And then add the following within the <head> section of your View to render it :

<head>
    <meta name="viewport" content="width=device-width" />
    @Html.Raw(ViewBag.CSS)
</head>

which would render the tag within your View :

<head>
    <meta name="viewport" content="width=device-width">
    <link href="/Content/Site.css" rel="stylesheet" type="text/css">
</head>

Can I load css like a stream?

I used custom search in jqgrid whenever i search a text by scrolling end of page,the data is not displayed in jqgrid

I scroll to the end of page using custom scrollbar then when i search for text data is not displayed its because of custom scrollbar if i remove the code then it works fine but i don’t know whats the problem

on grid completion event i added a code of jscrollpane as shown

  var table_header = $(‘#container’).find(‘.ui-jqgrid-hbox’).css("position", "relative");
                    $(‘#container’).find(‘.ui-jqgrid-bdiv’).bind(‘jsp-scroll-x’, function (event, scrollPositionX, isAtLeft, isAtRight) {
                        table_header.css(‘right’, scrollPositionX);
                    }).jScrollPane({
                        showArrows: true,
                        horizontalDragMaxWidth: 30,
                        verticalDragMaxHeight: 30,
                        autoReinitialise: true
                    });

If i scroll to quarter of page and  search for text assume in controller i have sent json 8 rows of data to display in jqgrid  it shows some 7 rows,again if i scroll downwards and search it reduces by 1 at end of page when i scroll it becomes empty
Cry.

But in controller code no problem in searching for text its the problem with jscrollpane,because if i remove the code in grid complete it shows the rows properly with default scrollbar

Example :I scrolled down my mouse wheel so 1 row went top of header then when i search for text it matches 8 rows need to display 8 rows but it is dispalying 8-1row went top i.e 7 rows it displays,same if i again scroll down so 2row went top of header then
when i search it displays 6 rows as same it applies for number of rows it doesnt dispaly finally when 8 rows went top it doesn’t display anything,how shall i solve this

$(document).ready(function () {
$("div").scroll(function () {
if ($(this)[0].scrollHeight – $(this).scrollTop() == $(this).outerHeight()) {
//Clear_Grid();
//Bind Jquery grid with Paging
}
});
});

[RESOLVED]Error in crud using wcf in mvc

Hi,

I want to display records using wcf in mvc.

First i have created an MVC project,the add new project  as wcfLibrary. and named as Wcfservice

this is my code for wcf.

[ServiceContract]
    public interface IDbService1
    {
        [OperationContract]
         List<MyAddress> GetAddress(string city);

        // TODO: Add your service operations here
    }
    [DataContract]
    public class MyAddress
    {

        [DataMember]
        public string Address1 { get; set; }
        [DataMember]
        public string City { get; set; }
    
    
    }

then i added entityDatamodel in wcf for connecting database .its name is AdventureWorks2008R2Entities

implemetaion in wcf

 {
        AdventureWorks2008R2Entities entities = new AdventureWorks2008R2Entities();
        public List<MyAddress> GetAddress(string city)
        {
            //return entities.Addresses.Where(c => c.City == city);
            var a = entities.Addresses.Where(c => c.City == city);
            List<MyAddress> list = new List<MyAddress>();
            foreach (var address in a)
            {
                list.Add(new MyAddress{Address1=address.AddressLine1,City=address.City});
            }
            return list;
        
        }
    }

then i buld .there is no error

then i added servicerefference of wcf in mvc project

code in Home controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcWcf.ServiceReference1;


namespace MvcWcf.Controllers
{
    public class HomeController : Controller
    {
       

        
        public ActionResult ViewCity()
        {
            
           DbService1Client client = new DbService1Client();
           
            return View(client.GetAddress("Bothell"));

        }
    }
}

then i added a view with empty modelclass and add this code in view

@using MvcWcf.ServiceReference1
@model List<WcfService.MyAddress>


@{
    foreach(WcfService.MyAddress address in Model)
    {
    
    <li>@address.Address1 @address.City</li>
    
    
    }
    
    
    
    
}

when i tries to run following error is showing

The model item passed into the dictionary is of type ‘WcfService.MyAddress[]’, but this dictionary requires a model item of type ‘System.Collections.Generic.List`1[WcfService.MyAddress]‘.

how to solve this. the code i got from a tutorial i followed correctly

Regards

Baiju

replace

klbaiju

@model List<WcfService.MyAddress>

with

@model WcfService.MyAddress[]

WCF service will return array of objects not List<T> . You have to convert it to
List<T> before passing to view by calling ToList():

return View(client.GetAddress("Bothell").ToList());

Hi Friend,

Thanks for your reply.

i have changed the code in controller as

public ActionResult ViewCity()
        {
            
           DbService1Client client = new DbService1Client();
           
            return View(client.GetAddress("Bothell").ToList());

        }

and change the code in view as

@using MvcWcf.ServiceReference1
@model IEnumerable<WcfService.MyAddress> 


<style type="text/css">
table,tr,td{border:1px solid black;border-collapse:collapse;}
</style>

<table>
<tr>
<td>@Html.DisplayNameFor(model => model.Address1)</td><td>@Html.DisplayNameFor(model => model.City)</td>
</tr>
@foreach (var item in Model)
{
    <tr><td>@Html.DisplayFor(modelItem => item.Address1)</td><td>@Html.DisplayFor(modelItem => item.City)</td>
</tr>
}
</table>

this working fine and display in table format.

still i want to solve another problem .

in the above code i wrote table header name and fieldnames manually.because i know i the field names.

how to write the table header name and field names automatically.

regards

Baiju

Hi friend thans for your reply

how to write the table header name and field names automatically in View

klbaiju

how to write the table header name and field names automatically in View

please open a new thread.

I have added a new thread.

http://forums.asp.net/p/2017019/5804204.aspx?p=True&t=635506811254954705&pagenum=1

How to write items in view dynamically in MVC

Hi,

Following is a working code for displaying records in view

@using MvcWcf.ServiceReference1
@model IEnumerable<WcfService.MyAddress> 


<style type="text/css">
table,tr,td{border:1px solid black;border-collapse:collapse;}
</style>

<table>
<tr>
<td>@Html.DisplayNameFor(model => model.Address1)</td><td>@Html.DisplayNameFor(model => model.City)</td>
</tr>
@foreach (var item in Model)
{
    <tr><td>@Html.DisplayFor(modelItem => item.Address1)</td><td>@Html.DisplayFor(modelItem => item.City)</td>
</tr>
}
</table>

in the above code i wrote table header name and fieldnames manually.because i know i the field names.

how to write the table header name and field names automatically.

regards

Baiju

Hi,

You wanted to display the header names from the Model? i.e.. the properties in the Model. If that is the case you can use the
Reflection 

Checkout the link below which will display the property names. 

http://www.csharp-examples.net/reflection-property-names/

should it write reflection in controller

No. Write within the html.

I tried with your link.doesn’t work

do you have any sample code

can i get any sample code

[RESOLVED]ASP.net MVC 4 learning material

Hello guys,

I need to learn asp.net mvc 4 for my final year project. Please suggest me some good tutorials and books which can teach me asp.net mvc. 

Also how to use Jquery and JSON with asp.net mvc 4. I’d really appreciate your help. :)

Thanks. 

There a couple of series of tutorials for MVC 4 here: http://www.asp.net/mvc/overview/older-versions

As far as jQuery and JSON are concerned, they are not tied to any web development framework. Any tutorial will serve you well.

Thanks :)

I have a question… how can we share data between websites? is it possible that one website sends some data to another website?

Leo536

how can we share data between websites? is it possible that one website sends some data to another website?

You can send data from one website to another using any of the below approaches

  • Get – pass the data as part of url
  • Post – Pass the data using http post
  • REST – define a rest endpoint using WebAPI and call it
  • WCF
  • File Upload
  • Some other ways which are not common

Hi Stolen Brain,

I am already following Kudvenkat’s tutorials on Youtube. They are really good no doubt. But I need to learn how to apply CSS, JSOn, ajax with asp.net mvc.

Please suggest me how can I learn all in less time and also apply them together. 

Thanks :)

Thanks pprasannak :)

Can you help me out with learning web development using asp.net mvc, css, jquery? I really need someone to guide me.

It’s a request :) 

Hi Leo536,

Thanks for your post.

Leo536

Can you help me out with learning web development using asp.net mvc, css, jquery? I really need someone to guide me.

It’s a request :) 

For CSS that are reused among the entire site I suggest that you can  define them in the <head> section of the _Layout:

<head>
    <link href="@Url.Content("~/Styles/main.css")" rel="stylesheet" type="text/css" />
    @RenderSection("Styles", false)
</head>

and if you need some view specific styles you can  define the Styles section in each view:

@section Styles {
    <link href="@Url.Content("~/Styles/view_specific_style.css")" rel="stylesheet" type="text/css" />
}

Hope this can be helpful.

Best Regards,

Eileen

Leo536

I need to learn asp.net mvc 4 for my final year project. Please suggest me some good tutorials and books which can teach me asp.net mvc. 

If you are looking for hands on  tutorial on how to get started with MVC. Below are two of best hands on sample tutorial available for MVC

NerdDinner

Music Store

Also I will provide some additional resources

The best online Tutorial you will find for MVC none other than this site itself

If you are looking for E-Learning Tutorial on how to get started with MVC. Please check the below links

Also you can check out this link for various tutorial links

Below are some Video Tutorial links which will help you to get started in MVC

You can also check the below link which points to 25+ Tutorials and Articles

MVC in 7 days

http://www.codeproject.com/Articles/207797/Learn-MVC-Model-View-Controller-step-by-step-in

you can start by understanding getting started with asp.net mvc with request life cycle

for jQuery Ajax example check 
jQuery Ajax example with json object

This is very nice that you are starting with MVC. There are many good links though but for getting into the basics and proper understanding you can follow:-

https://www.youtube.com/user/kudvenkat

In the above link you can find many videos with the title you have given.

http://www.codeproject.com/Articles/207797/Learn-MVC-Model-View-Controller-step-by-step-in

and also you can follow Adam Freeman Mvc4 professional book. A great book indeed.

Thanks

Thank you so much guys :) 

Am a MVC programmer, When i was new to MVC i learned basic MVC from the following site

http://www.codeproject.com/Articles/207797/Learn-MVC-Model-View-Controller-step-by-step-in

It will be really helpful for you. Everything is explained here neatly !! hope that helps

[RESOLVED]Themes/Skins in MVC

Hello All,

I am trying to implement themes/skins in MVC application. So, which are the best ways to implement it ?

My application will have different clients and every client will have different themes. Based on the client I want apply the themes/skins.

For e,g,

  1. localhost/MyProject/Client=A      /// Apply the red theme
  2. localhost/MyProject/Client=B     /// Apply the blue theme

Thanks !

Hi,

there’s no direct equivalent of skins in MVC like you have in webforms.

However you can make use of CSS to make your site to look & feel different. Simply load up a different CSS file depending on a parameter like clientID.

Grz, Kris.

XIII

Hi,

However you can make use of CSS to make your site to look & feel different. Simply load up a different CSS file depending on a parameter like clientID.

Grz, Kris.

Yeah. I thought So. trying to load from BundleConfig but I am not able to do that.

Can you give any example of it ?

Hi,

Post your BundleConfig, Make sure that you do not have wrong order. also order on .cshtml.

Have fun

jsiahaan

Hi,

Post your BundleConfig, Make sure that you do not have wrong order. also order on .cshtml.

Have fun

Ok.. that problem has been solved. Thanks for the help…

However, I would like know how can I change the theme on drop down list index changed OR any other method ???

Hi rohitpundlik,

Thanks for your post.

I think you can’t change the theme on dropdownlist index changed,but you can change the dropdownlist style.or you can customize the look and feel of your site.please check these:

How to style MVC3/ASP.net DropDownList?

Adding a css class to select using @Html.DropDownList()

multi Themes in asp.net mvc 4

Hope this can be helpful.

Best Regards,

Eileen

[RESOLVED]Help bundles on MVC5

i just start use mvc5. And i want dont use bootstrap default. But it have error when i change content bootstrap. I have try bind in BundleConfig.cs but it fail and appear error:

error image

There is my bundles

bundles.Add(new StyleBundle("~/Content/css").Include(
                   "~/Content/site.css"
                  ));
        bundles.Add(new StyleBundle("~/Content/dist/Edit/css").Include(
            "~/Content/dist/Edit/bootstrap.css"
            ));

Thanks for read.

In the Image, you have passed two url of contents into the @Scripts.Render.

Once you have included more than one contents into a bundle means that is bound to thatbundle. So you use only the bundle name, not each content that you have included.

Thanks.

Thanks. 

I have find  error in 

BundleTable.EnableOptimizations = true;

Change value to FALSE, it wil work.

Thanks.

[RESOLVED]How do i implement UI Design in MVC For My Application?

HI ,

         We usually Creates the master Page .In that we can design our desired Web Templates.That is too easy .But how can be do that in mvc .

I want rich design style for application .How can this possible.? Can any one guide with cleared example Coding …

Thanks in advance ,

Karthik k 

 

The (Razor view engine) MVC equivalent to a master page is a Layout page. You will find one in the default template called _Layout.cshtml in the Views/Shared folder. The default template uses Bootstrap. You can search for free bootstrap themes and replace
the existing Bootstrap CSS file with a theme for easy design.

Here’s some free bootstrap template sites to get you started:

You can use bootstrap for any application. Bootstrap is a powerful , responsive  and easy to use one. Just download Bootstrap from http://getbootstrap.com/  .. For guidance regarding how to use bootstrap you can refer
bootstrap site http://getbootstrap.com/css , http://getbootstrap.com/javascript  etc.. The main advantage of bootstrap is that its mobile supported. 

Designed for everyone, everywhere.

Bootstrap makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Hello Mikesdotnetting

    Thanks for your reference for bootstrap themes sites.. Its aweful .. 

@ Mikes ,

      Thanking You for  Your Post .All Templates Gorgeous indeed .

-    Karthik .K

 

Partial View not posting selected values back

Ok I pass a viewmodel to the page inside the view model consist of three classes and a class called Filter.

I have three views each have a table on but all require the same search functionality, so i decided to put the filter in a partial view.

below is how one of my controller look.

 [HttpGet]
        public ActionResult Hierarchy()
        {
            var vm = new ProjectViewModel();

            try
            {
                var userId = (int)WebSecurity.CurrentUserId;
                var isAdmin = User.IsInRole("Admin");

                vm = new ProjectViewModel
                {
                    Filter = new FilterResults(),
                    DealerHierarchy = new DealerHierarchy().GetPosition(null, null, userId, isAdmin)
                };

                vm.Filter.PaymmentStatus = new PaymentStatus().ReturnStatus(); // Build the selected Status
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
            }
            return View(vm);
        }

vm.Filter is the search i.e fromDate toDate etc

below is how my view is contructed, you can see I pass down the Filter from the vm into the Partial View.

<h2>Hierarchy</h2>

@using (Html.BeginForm("Hierarchy", "Dealer", FormMethod.Post))
{
    @Html.Partial("~/Views/Shared/Filter.cshtml", @Model.Filter)
    <p>
        <button type="submit">Filter</button>
    </p>
}
<table>
    <thead>
        <tr>
            <th>Dealer Name</th>
            <th>Commission Amount</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.DealerHierarchy)
        {
            <tr>
                <td>
                    @item.DealerName
                </td>
                <td>
                    @String.Format("{0:n0}", item.CommissionAmount)
                </td>
            </tr>
        }
    </tbody>
</table>

This is the partial view

@model SomeApp.Models.FilterResults

<style type="text/css">
    .filter-container {
        width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
</style>

<div class="filter-container">
  
    @Html.TextBoxFor(m => m.FromDate, new { @placeholder = "From Date", @Id = "txtFromDate" })

    @Html.TextBoxFor(m => m.ToDate, new { @placeholder = "To Date", @id = "txtToDate" })

    @Html.DropDownListFor(m => m.SelectedPaymentStatus, Model.PaymmentStatus, new { @ID = "drpPaymentStatus" })
</div>

All renders correct, but when I press Filter on the actual view it posts back but the values I have entered into the partial view aren’t passed back….

Any help?

Harrison.Scott

@using (Html.BeginForm("Hierarchy", "Dealer", FormMethod.Post))

Your filter form posts to the Hierarchy action inside the Dealer controller

Harrison.Scott

[HttpGet]
        public ActionResult Hierarchy()

But this action is defined as HttpGet. You need another Hierarchy action which accepts a post.

First of all this:

@Html.Partial("~/Views/Shared/Filter.cshtml", @Model.Filter) // @ is not needed here for before Model

should be like this:

@Html.Partial("~/Views/Shared/Filter.cshtml", Model.Filter)

You need a post action as well which will task your partial view model as parameter:

[HttpPost]
public ActionResult Hierarchy(SomeApp.Models.FilterResults model)
{

 // do something here with model posted

}
Sorry I already have a post action for the page, the controller snippet I showed above was where it was loading and populating the filter class inside the view model.

My post method expects the view model but yet filter values are null

can you show your that action here??

Harrison.Scott

My post method expects the view model but yet filter values are null

Your post method should expect ProjectViewModel as the input parameter. As Model binding is done by naming convention, your input model should be same as that of the parameters that is passed.

Best way is to view the generated html and from there determine the object that will be passed. Please post your generated html for the form.

binding counts on the name of the fields to be correct. to bind your partial view fields, they need to have the Filter. prefix (Filter.FromDate). your partial view does not know about the  prefix set so its rending the wrong field names. use:

 @Html.Partial("~/Views/Shared/Filter.cshtml") 

and use the complete model name (m=>m.Filter.FromDate) in the partial.

note: if you google you can find sample code to build a partial view that supports passing a prefix.

also if you want the partial reusable, define an IFilter interface that is just the property Filter of type FilterResults. then you can have multiple model implement the interface, and use the interface as the model type in the partial.   

Hi Bruce,

My view now looks like this

@using (Html.BeginForm("Hierarchy", "Dealer", FormMethod.Post))
{
    @Html.Partial("~/Views/Shared/Filter.cshtml", Model)
    <p>
        <button type="submit" value="Filter"></button>
    </p>
}

I have changed my partial view so it now looks like this

@model SomeApplication.ViewModel.ProjectViewModel

    <style type="text/css">
        .filter-container {
            width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

    <div class="filter-container">

        @Html.TextBoxFor(m => m.Filter.FromDate, new { @placeholder = "From Date", @Id = "txtFromDate" })

        @Html.TextBoxFor(m => m.Filter.ToDate, new { @placeholder = "To Date", @id = "txtToDate" })

        @Html.DropDownListFor(m => m.Filter.SelectedPaymentStatus, Model.Filter.PaymmentStatus, new { @ID = "drpPaymentStatus" })
    </div>

my controller

 [HttpPost]
        public ActionResult Hierarchy(ProjectViewModel vm)
        {

            DateTime? fromDate = vm.Filter.FromDate;

            return View(vm);
        }

yet my values are still null unless I have missed something?