Category Archives: Table

Table

[RESOLVED]Need help to create Cascading DropDownList using MVC4 – C# from Database

I have 2 dropdown lists  (State and City) in my form and I want to show them as Cascading DropDownList.

When I select a State then I want to display only the related cities in that state.

My mode:

public class AustraliaStates
    {
        [Key]
        public string AustraliaStateId { get; set; }
        public string AustraliaStateName { get; set; }
    }

    public class AustraliaCities
    {
        [Key]
        public string AustraliaCityId { get; set; }
        public string AustraliaCityName { get; set; }
    }



    public class Accommodation
    {
        [Key]
        public string A_Unique_Id { get; set; }

        [Display(Name = "Street")]
        public string Street { get; set; }

        [Required]
        [Display(Name = "Suburb")]
        public string Suburb { get; set; }

        [Display(Name = "City")]
        public string City { get; set; }

        [Display(Name = "State")]
        public string State { get; set; }

        public string SelectedAustraliaStateId { get; set; }
        public IEnumerable<SelectListItem> AustraliaStates { get; set; }


        public string SelectedAustraliaCityId { get; set; }
        public IEnumerable<SelectListItem> AustraliaCities { get; set; }
    }

Create.cshtml Get controller:

// GET: /Accommodation/Create
        [Authorize]
        public ActionResult Create()
        {

            var model = new Accommodation
            {
                AustraliaStates = db.AustraliaStates
                             .ToList() // this will fire a query, basically SELECT * FROM Products
                             .Select(x => new SelectListItem
                             {
                                 Text = x.AustraliaStateName,
                                 Value = x.AustraliaStateId
                             }),

                AustraliaCities = db.AustraliaCities
                             .ToList() // this will fire a query, basically SELECT * FROM Products
                             .Select(x => new SelectListItem
                             {
                                 Text = x.AustraliaCityName,
                                 Value = x.AustraliaCityId
                             });
                


            return View(model);
        }

Create.cshtml View

<td class="FormDisplayRightTableStyle">
                                <div class="editor-field">
                                    @Html.DropDownListFor(model => model.SelectedAustraliaStateId, Model.AustraliaStates, new {@class="DropDownFieldStyle" })

                                </div>
                            </td>    
                        </tr>

                        <tr>
                            <td class="FormDisplayLeftTableStyle">
                                <div class="editor-label">
                                    @Html.LabelFor(model => model.City)
                                </div>
                            </td>
                            <td class="FormDisplayRightTableStyle">
                                <div class="editor-field">
                                    : @Html.DropDownListFor(model => model.SelectedAustraliaCityId, Model.AustraliaCities, new {@class="DropDownFieldStyle" })
                                </div>
                            </td>    
                        </tr>

I need to solution to show the DDL as Cascading DropDownList.

can someone please help me?

Thanks in advance.

Here is the form I am working on:

http://overseasindians.com.au/Accommodation/Create

Typical cascading dropdown lists only load the first list initially.  So in your case, you would load your States to the view.  Upon selecting a state, a JSON get-request is made back to your controller, where you’ll return a list of cities based on the
selected state.  Your Cities dropdown will also be hidden at the start, but will be revealed once a country is selected.  Also, you don’t want to return a model based on your two lists because a Create view needs to reserve a model specifically for the form
elements of the View.

public ActionResult Create()
{
  var states = db.Australiastates.ToList();

  ViewBag.stateList = states;

  return View();
}

In the above action, we create a list of States and pass them to the view as a ViewBag object.  We do NOT return any model to the view.

Now we create the View:

@model AppName.Models.YourFormModel

@section scripts {
  <script type="text/javascript">
    $("#Cities").hide();

    $("#States").on("change", function () {

// make the get-request
$.getJSON('@Url.Action("GetCities")', { id: $(this).val() }, function (cities) {

// populate the Cities dropdown with returned data
$.each(cities, function (i, city) {
$("#Cities").append('<option value="' + city.AustraliaCityId + '">' + city.AustraliaCityName + '</option>');
});

});

// show the Cities dropdown
$("#Cities").show();

}); </script> } <div> @Html.DropDownList("States", new SelectList(ViewBag.stateList, "AustraliaStateId", "AustraliaStateName"), "Select a state") </div> <div> <select id="Cities" /> </div>

In the above view, we have a dropdown list for both States and Cities, however you’ll notice that the Cities dropdown list is just a generic <select> element.  This is because we didn’t initially pass any data from the Create action to the view, so there’s
no reason to have the DropDownList helper.  We also have a "scripts-section" at the top, with a <script> block and some code inside.  The code is jQuery.  the first line hides our Cities dropdown because it will initially be empty, so it doesn’t need to be
shown immediately.  The 2nd part of the script is an on-change event for the States dropdown list.  On-change, we make a call to an action named "GetCities" where we pass an "id" param of the states dropdown value.  The action will use this param to find all
cities associated with the ID and return it back to the View.  Once the data is returned, we populate the Cities dropdown list, and then show the dropdown list so it can be visible.

Next, we need to add the "GetCities" action to take the State ID and return a list of Cities:

[HttpGet]
public ActionResult GetCities(int id)
{
  var cities = db.AustraliaCities.Where(c => c.State_ID == id).ToList();

  return Json(cities, JsonRequestBehavior.AllowGet);
}

This action should be fairly obvious.  We used the state’s ID to gather a list of cities.  The only issue I had with this is that I didn’t see a "StateID" property in your AustraliaCities model, though I feel there should be one to create an association
between City and State.  I’ll let you determine how to use the state’s ID in the action to populate your Cities list.  In any case, once you have your list of cities, you return it as a JSON result.

That’s all there is to it.  This is a complete working solution.  Please let me know if you have questions.

Hi athelli_,

Thanks for your post.

athelli_reddy

Need help to create Cascading DropDownList using MVC4 – C# from Database

You can use JQuery, Please refer to this link:

#Creating cascading dropdownlists using MVC 4 And JQuery

http://jnye.co/Posts/12/creating-cascading-dropdownlists-using-mvc-4-and-jquery

Hope this can be helpful.

Best Regards,

Eileen

Thank you very much John for detailed explanation & your solution is working.

Can you please let me know how can I make State Dropdown menu field as a Mandatory field and show a client side validation if when the dropdown contains "Select a state" value.

public class AustraliaStates
    {
        [Key]
        public string AustraliaStateId { get; set; }
        
        [Required]  ->what else I can add here to make it as a Mandatory if there is "Select a state" value
        public string AustraliaStateName { get; set; }
    }

or do I need to write any java script??

[RESOLVED]Adding a new field in Register Page.Storing Data in DataBase

Hi, 

 I’m new to this,To start with i downloaded a wingtip web asp.net sample. I want to include a new field ‘EMPLOYEEID" in register page and store the data in AspNetUsers database table. I have created the field in Register page and a new column in database(Aspnetuser.EmployeeID)
.

What are the changes to be done in code to add the user data to database through register page.

//For now I have done something like this: IN register.aspx page I changed this(in BOLD)

protected void CreateUser_Click(object sender, EventArgs e)
{
var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>();
var user = new ApplicationUser() { UserName = Name.Text, Email = Email.Text , EmployeeID = EmployeeID};
IdentityResult result = manager.Create(user, Password.Text);

Hi harshilshah,

Thanks for your post.

Based on my understanding ,you want to add extra information in  AspNetUsers database table?

Firstly you need to install these two packages:- Microsoft.Aspnet.Identity.Core

This package contains the core interfaces of ASP.NET Identity.Microsoft.Aspnet.Identity.EntityFramework

This package contains the implementation of ASP.NET Identity System which works with Entity Framework Code First. This means that if we use this package then we can store information in a SQL Server database. Also we can easily plug other databases if we
wanted.and then updated your IDE

Secondly,Enable Entity Framework Code First Database Migrations.Thirdly,Add new properties

Fourthly,Add New Migration

Fifthly,Update RegisterViewModel

and then Update Register View Page and Update Account Controller’s Register action (Post Version)

Details information:

#Customize User’s Profile in ASP.NET Identity System

http://www.itorian.com/2013/11/customize-users-profile-in-aspnet.html

Hope this can be helpful.

Best Regards.

Eileen

[RESOLVED]Order of an image

Hi, in my database i create a table where i held the infos of my pictures… and also the order in number format…

After i order them by my order field.. till here all ok…

the problem is that at the moment i need to fill my order field with a number, but what i would love to do is the following :

In my list of pictures i would love to show 2 link : UP and DOW

If i click on up i would love to give to that picture the order of the upper picture and the upper picture to take the other order, in this way i can put up my picture…

So if i have :

1 –> AAAA (Up / Down)

2–> BBBB (Up / Down)

3–> CCCC (Up / Down)

4–> DDDD (Up / Down)

If i click on UP for the picture CCCC i should have :

1 –> AAAA (Up / Down)

2–> CCCC (Up / Down)

3–> BBBB (Up / Down)

4–> DDDD (Up / Down)

The problem is also for the first and the last picture, that they :

can’t go up for the first

can’t go down for the last

I hope i well explain what i would love to do…

How to do?

Hi grafic,

For this requirement, please follow up these steps below:

  1. Create an action method to update the order number.
    public ActionResult Index(int id, bool isUp)
    {
       //TODO retrieve current entity
       //TODO Validate order number (first, last)
       //Base on the order number retrieve privious/next entity
       //TODO 
    }
  2. Base on the order number to get the previous or next record. (Using ElementAt method)
  3. Update current entity with previous/next record order number and update previous entity with current entity’s order number.

For the first entity, you just need to check the order number. If the value of order number is 1, then it means that record is the first one.

For the last entity, you need to check all record count, if the order number equals to all record count, it means that record is the last one.

Best Regards

Starain Chen

Hi, sorry to bother.. can i have i bit more of code… because i never done this…

Thanks

Hi grafic,

Since I don’t have your project, I think you need to do it by yourself.

If you have any questions about these steps, you could post it here.

Best Regards

Starain Chen

[RESOLVED]Bind IDictionary List to MVC WebGrid

I’m dont know how to bind an IDictionary list to a MVC WebGrid. This is what I have so far

 public List<IDictionary> GetAddress()
        {
            List<IDictionary> names = new List<IDictionary>();
        //List<string> names = new List<string>();
            using (MVCDBEntities example = new MVCDBEntities())
            {
                var Uus = from U1 in example.Users where U1.Name != null select U1;
                names = Uus.OfType<IDictionary>().ToList();
            }
            return names;
        }

I now need to some how bind  this to a webgrid, how would I achieve this ?

Hi,

taken from

http://forums.asp.net/t/1719060.aspx?Binding+MVC3+webgrid+from+DataTable+AsEnumerable+:

Model method:

public List<IDictionary> FetchEmployeeDetails()
         {
             DataSet dsEmployee = new DataSet();
             DbCommand dbCmd = m_DbAccess.SqlDb.GetStoredProcCommand("Test_FetchEmployeeDetails");
             dbCmd.CommandType = CommandType.StoredProcedure;
             dsEmployee = m_DbAccess.SqlDb.ExecuteDataSet(dbCmd);

             return ConvertToListDictionary(dsEmployee.Tables[0]);
         }

Controller Code:

public ActionResult FetchDataForGrid()
         {
             EmployeeModels modelObject = new EmployeeModels();
             var resultSet = modelObject.FetchEmployeeDetails();
             return View(resultSet);
        }

View Code:

@using System.Dynamic
 @model List<System.Collections.IDictionary>
 @{
     var result = new List<dynamic>();

     foreach (var emprow in Model)
     {
         var row = (IDictionary<string, object>)new ExpandoObject();
         Dictionary<string, object> eachEmpRow = (Dictionary<string, object>)emprow;

         foreach (KeyValuePair<string, object> keyValuePair in eachEmpRow)
         {
             row.Add(keyValuePair);
         }
         result.Add(row);
     }
     var grid = new WebGrid(result);
 }

 @if (@Model != null)
 {
     @grid.GetHtml(tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt");
 }

Grz, Kris.

Thanks for the reply, I am just getting an error with the IDictionary list anyways thanks for your time.  Is there anyway you can just use a asp.net Gridview control with something like this with the entity framework ? As binding data to a webgrid in mvc
is a joke, so much extra work, in php its easier than this

Hi,

you can’t really make use of the gridview in MVC.

What you can do, and what I did in the past, is make use of jqGrid and bind the grid client side. There are also commercial tools for this like KendoUI and others.

Grz, Kris.

[RESOLVED]how can i use url.action in @helper method ?

Hi dear ,

 I create a @helper method and use @Url.Action helper in it.(in App_Code Folder)

@helper GetNews(int CategoryID, int Rows)
{
         <div class="@Style" id="@CategoryID">
         
                  <a style="padding-right:10px" href="@Url.Action("Rss", "Home", new { type="News" , cid = CategoryID})"><img src="@Url.Content("~/images/icon/rss.png")" /></a>
                                &nbsp;
                                <a href="@Url.Action("Details", "News", new { cid=CategoryID,sid=Model})">arshive</a>
                             </div>
                        
}

after run i get an error :

Compilation Error 
  Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

 Compiler Error Message: CS0103: The name 'Url' does not exist in the current context

Source Error:


 

Line 193:                                </table>*@
Line 194:
Line 195:                                <a style="padding-right:10px" href="@Url.Action("Rss", "Home", new { type="News" , cid = CategoryID})"><img src="@Url.Content("~/images/icon/rss.png")" /></a>
Line 196:                                &nbsp;
Line 197:                                <a href="@Url.Action("Details", "News", new { cid=CategoryID,sid=Model})">arshive</a>
 

Also,
I had
to have
a class named ExtensionMethodHelper
for create external helpers and use it ( in Model folder ).but i
can not call
this
external helpers on the page(.cshtml) that
I’ve created
in
App_Code folder.

in fact after write @Html.  i dont find my favorite external helper (in ExtensionMethod class in Model folder).

for e.g : Html.PersianDate made in ExtensionMethodHelper in Model Folder

   <span class="date">@Html.ToPersianDate(item.DateToShow)</span>

in :

below helper create in App_Code

@helper GetNews(int CategoryID, int Rows)
{
       <div class="@Style" id="@CategoryID">
                <a style="padding-right:10px" href="@Url.Action("Rss", "Home", new { type="News" , cid = CategoryID})"><img src="@Url.Content("~/images/icon/rss.png")" /></a>
                       &nbsp;
                   <a href="@Url.Action("Details", "News", new { cid=CategoryID,sid=Model})">arshive</a>
       </div>
                        
}

 how can i solve it

please help me

thanks

I use the "UrlHelper" class to do this.  Here’s a helper I always used in my projects (prior to bundles).  Use it as an example to expand on your own:

// file name is "Content.cs" stored in App_Code folder

@using System.Web.Mvc; @helper Script(string scriptName, UrlHelper url) { <script type="text/javascript" src="@url.Content("~/Scripts/" + scriptName)"></script> }

the helper in my View then looks like:

@Content.Script("jquery-1.10.1.min.js", Url)

You can see that I pass the "Url" to the helper.  Your helper would then look like…

@helper GetNews(int CategoryID, int Rows, UrlHelper url)
{
  ...

  <a href="@url.Action("Rss", "Home", ...)">

  ...
}

the "url" is lowercase fyi.  Don’t confuse it with Url

[RESOLVED]How to Post with foreign keys

public List<Job> PostNewJob(Job newJob)
        {
            Job job = new Job();

            job.JobId = newJob.JobId;
            job.JobNumber = newJob.JobNumber;
            job.JobName = newJob.JobName;
            job.JobDescription = newJob.JobDescription;
           
            db.Jobs.Add(newJob);
            db.SaveChanges();

            return db.Jobs.ToList();
        }

 public class Job
    {
        public Job()
        {
            this.Customers = new HashSet<Customer>();
            this.ChangeOrders = new HashSet<ChangeOrder>();
        }
        public int JobId { get; set; }
        public int JobNumber { get; set; }
        public string JobName { get; set; }
        public string JobDescription { get; set; }

        public virtual ICollection<Customer> Customers { get; set; }
        public virtual ICollection<ChangeOrder> ChangeOrders { get; set; }
    }


public List<Customer> PostNewCustomer(Customer newCustomer)
        {
            Customer customer = new Customer();

            customer.CustomerId = newCustomer.CustomerId;
            customer.CustomerName = newCustomer.CustomerName;
            customer.CustomerPhoneNumber = newCustomer.CustomerPhoneNumber;
            customer.CustomerFaxNumber = newCustomer.CustomerFaxNumber;
            customer.JobId = newCustomer.JobId;

            db.Customers.Add(newCustomer);
            db.SaveChanges();

            return db.Customers.ToList();
        }

 public class Customer
    {

        public int CustomerId { get; set; }
        public string CustomerName { get; set; }
        public Int64 CustomerPhoneNumber { get; set; }
        public Int64 CustomerFaxNumber { get; set; }

        public int? JobId { get; set; }
    }


 $scope.submitJob = function () {
        var id = $scope.currentItem.JobName
        var data = {
            JobId: $scope.currentItem.JobId,
            JobNumber: $scope.currentItem.JobNumber,
            JobName: $scope.currentItem.JobName,
            JobDescription: $scope.currentItem.JobDescription
            
            
        }
        $http.post('/api/apiJob/PostNewJob', data).success(function (data, status, headers) {
            console.log(data);
               $scope.PrintPreviewModal();
               window.top.location.reload();
            
        });
 };

  <form ng-submit="submitJob()" enctype="multipart/form-data">
                            <fieldset>
                                <div>
                                    <div class="inline-fields">
                                        <label>Number:</label>
                                        <input ng-model="currentItem.JobNumber" type="text">

                                        <label>Job Name:</label>
                                        <input ng-model="currentItem.JobName" type="text">
                                        <label>Customer:</label>
                                        <input type="text" ng-model="currentItem.CustomerName">
                                    </div>
                                    <div class="inline-fields">
                                        <label>Address:</label>
                                        <input ng-model="currentItem.CustomerAddress" type="text">
                                    </div>
                                    <div class="inline-fields">
                                        <label>City:</label>
                                        <input ng-model="currentItem.CustomerCity" type="text">

                                        <label>St:</label>
                                        <input ng-model="currentItem.CustomerState" type="text">

                                        <label>Zip:</label>
                                        <input ng-model="currentItem.CustomerZipcode" type="text">

                                <input type="submit" value="Save" />

                            </fieldset>
                        </form>

I am trying to change how I post and update my primary class JOB. Previously I was using the Customer Class as a List and I was storing the JOB Customer information in the Job class itself. The problem with this was If I went to go update a Customers information
in the Customer List I would have to go to every Job that has that Customer and Manually update everyone separately. So I am unsure how to do this. When I am creating a New Job how do I  Connect the appropriate Customer with that Job? I am already doing this
with another class called ChangeOrder but the difference is the Job has to be already been created before I can make that Post.. And also, the Customer can be assigned to multiple Jobs. So How does the foreign key work with this? How can you have a Customer
with multiple foreign keys "JobIds" attached to it?

What you are looking is a many to many relationship. Please take a look at this article in MSDN magazine

Handle Many-to-Many Relationships in Entity Framework and ASP.NET MVC

ok, so I created a linking table. What am I doing wrong? Here is what is coming back from the database

 {$id:1, JobCustomerId:1, JobId:1, Job:null, CustomerId:2, Customer:null}
$id: "1"
Customer: null
CustomerId: 2
Job: null
JobCustomerId: 1
JobId: 1

public class JobCustomer
    {
        public int JobCustomerId { get; set; }
        public int JobId { get; set; }
        public virtual Job Job { get; set; }
        public int CustomerId { get; set; }
        public virtual Customer Customer { get; set; }
    }
public class Job
    {
       
        public int JobId { get; set; }
        public int JobNumber { get; set; }
        public string JobName { get; set; }
        public string JobDescription { get; set; }

        public ICollection<JobCustomer> JobCustomers { get; set; }
       
    }
public class Customer
    {

        public int CustomerId { get; set; }
        public string CustomerName { get; set; }
        public Int64 CustomerPhoneNumber { get; set; }
        public Int64 CustomerFaxNumber { get; set; }

        public ICollection<JobCustomer> JobCustomers { get; set; }
      }
public List<JobCustomer> GetJobs()
        {
            List<JobCustomer> jobs = new List<JobCustomer>();
             jobs = db.JobCustomers
                .ToList();
            return jobs;
        }

Hi texas697,

You don’t need to create a link table manually, the EF will create it. For the link table, it doesn’t have the entity field, just the keys of these entities.

For your code, the fluent API would be like this:

modelBuilder.Entity<Job>() 
    .HasMany(j => j.Customers) 
    .WithMany(c => c.Jobs) 
    .Map(m => 
    { 
        m.ToTable("JobCustomer"); 
        m.MapLeftKey("JobId"); 
        m.MapRightKey("CustomerId"); 
    });
public class Job
    {
       
        public int JobId { get; set; }
        public int JobNumber { get; set; }
        public string JobName { get; set; }
        public string JobDescription { get; set; }

        public ICollection<Customer> Customers { get; set; }
       
    }
public class Customer
    {

        public int CustomerId { get; set; }
        public string CustomerName { get; set; }
        public Int64 CustomerPhoneNumber { get; set; }
        public Int64 CustomerFaxNumber { get; set; }

        public ICollection<Job> Jobs { get; set; }
      }

More information, please refer to:

# Configuring a Many-to-Many Relationship

http://msdn.microsoft.com/en-in/data/jj591620.aspx#ManyToMany

Best Regards

Starain Chen

that sure does make things easier. Now what if I have additional classes that need to be linked to Job? How would the modelBuilder look? Do i put this in my IdentityModels? If this is the correct way of doing it, I did do a migration without errors. The
tables in the sql where created. But How Do I query the information from my project? I went through the JobApi but the data for Customers, ChangeOrders, etc… came back null. 

 public class ApplicationUser : IdentityUser
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public bool? Hidden { get; set; }
        public string UserEmail { get; set; }
    }

    public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
    {
        public ApplicationDbContext()

            : base("DefaultConnection", throwIfV1Schema: false)
        {
            this.Configuration.LazyLoadingEnabled = false;
            this.Configuration.ProxyCreationEnabled = false;

        }
        public DbSet<Job> Jobs { get; set; }

        public DbSet<Employee> Employees { get; set; }
        public DbSet<Customer> Customers { get; set; }
        public DbSet<ChangeOrder> ChangeOrders { get; set; }
        public DbSet<JobType> JobTypes { get; set; }
        public DbSet<GeoArea> GeoAreas { get; set; }
        public DbSet<JobClass> JobClasses { get; set; }

        protected override void OnModelCreating
       (DbModelBuilder modelBuilder)
        {
base.OnModelCreating(modelBuilder); modelBuilder.Entity<Job>() .HasMany(j => j.Customers) .WithMany(c => c.Jobs) .Map(m => { m.ToTable("JobCustomer"); m.MapLeftKey("JobId"); m.MapRightKey("CustomerId"); }); modelBuilder.Entity<Job>() .HasMany(j => j.ChangeOrders) .WithMany(c => c.Jobs) .Map(m => { m.ToTable("JobChangeOrder"); m.MapLeftKey("JobId"); m.MapRightKey("ChangeOrderId"); }); modelBuilder.Entity<Job>() .HasMany(j => j.GeoAreas) .WithMany(c => c.Jobs) .Map(m => { m.ToTable("JobGeoArea"); m.MapLeftKey("JobId"); m.MapRightKey("GeoAreaId"); }); modelBuilder.Entity<Job>() .HasMany(j => j.JobTypes) .WithMany(c => c.Jobs) .Map(m => { m.ToTable("JobJobType"); m.MapLeftKey("JobId"); m.MapRightKey("JobTypeId"); }); modelBuilder.Entity<Job>() .HasMany(j => j.JobClasses) .WithMany(c => c.Jobs) .Map(m => { m.ToTable("JobJobClass"); m.MapLeftKey("JobId"); m.MapRightKey("JobClassId"); }); } }

 public class Job
    {
       
        public int JobId { get; set; }
        public int JobNumber { get; set; }
        public string JobName { get; set; }
        public string JobDescription { get; set; }

        
        public ICollection<Customer> Customers { get; set; }
        public ICollection<ChangeOrder> ChangeOrders { get; set; }
        public ICollection<GeoArea> GeoAreas { get; set; }
        public ICollection<JobClass> JobClasses { get; set; }
        public ICollection<JobType> JobTypes { get; set; }
    }

Hi texas697,

Your code is right.

To load the related entities, we could use Include method.

For example:

var data =db.Jobs.Include("Customers");

Best Regards

Starain Chen

[RESOLVED]How to save and display Multiple responsiblities of data into a single record

i want to manage the job posting data in website. here i am creating a page to insert the job requirement details into database and display in a webpage .

every thing is fine but when came to reponsibilities. their may be many more responsibulities for a particular job . here i  want to save it in a single column in database

but i want to display in a page in a listed format how can i save and retrieve this responsibilites columns. now every thing is in static so i am trying it to dynamic from database.

i want ot display in a format like this

<tr>
                                            <td valign="top"><p><b>Responsibilities</b></p></td>
                                            <td valign="top"><p><b>:</b></p></td>
                                            <td>
                                                <p>
                                                    <ul style="padding-left:30px;">
                                                        <li>Strong Java skills with extensive knowledge of the Android SDK.</li>
                                                        <li>Object Oriented PHP skills at all scales.  </li>
                                                        <li>Exceptional organizational & project management skills.</li>
                                                        <li>Demonstrated success in defining & launching mobile apps.</li>
                                                    </ul>
                                                </p>
                                            </td>
                                        </tr>

please give me some suggestions so how can i save it in a single column and how can rearrange it in a form look like above format

Assume that you are storing the responsibilities in a single column with comma separation

<tr>
    <td valign="top"><p><b>Responsibilities</b></p></td>
    <td valign="top"><p><b>:</b></p></td>
    <td>
        <p>
            <ul style="padding-left:30px;">

                @{
                    
                    string[] resps = Model.Responsibilities.Split(",".ToCharArray());
                    foreach(string resp in resps)
                    {
                         <li>@resp</li>
                    }
                    
                }
              
            </ul>
        </p>
    </td>
</tr>

Hi Siva,

First, please refer to cnuonline’s reply. You’d better use the special separator (E.g @#).

Secondly, to save the data, you could use
String.Join
method to combine the values.

On the other hand, in my opinion, it’s better to store the responsibilities data to another table. (One to many)

Best Regards

Starain Chen

[RESOLVED]Layout Needs a Model

Hi All,

I am working on a project for which the UI was created by someone else.  The project has a Partial View called _ApplicationLayout.cshtml that renders on every view page in the project.   It also hosts several partial views, one of which is the "_Comments.cshtml"
view in which I need to display all of the comments from the database that are associated with the application in the right bar of the layout.  I cannot use a View Model in the _Comments.cshtml partial, because it is rendered in the _ApplicationLayout.cshtml
and of course the View Model clashes with all of the other View Models throughout the project.  Can anyone tell me just how can solve this problem?  The comments do need to show on every page (view) in the project.

You can do it via two different ways,

  1. Call @Html.RenderAction  rather than partial to render the result of an action method, that will give you chance to separate out the code with strongly typed model
  2. Create a base controller and initialize the data and assign it to ViewBag which is required for comments view, now all controllers will inherit from base controller and they will have the data available.

I would prefer the first approach as it is a MVC way of doing things and avoid any accidental miss of controller inheritance.

Either move the comments-partial to the actual View, or replace the Partial helper with an Action helper and pass it an ID/value to process data and return a partial view

Example–

Instead of:

@Html.Partial("_Comments")

do:

@Html.Action("GetComments", new { id = X })

where X could be a ViewBag.Value or a URL parameter, example:

@Html.Action("GetComments", new { id = ViewBag.BlogID })

public ActionResult GetComments(int id)
{
  var comments = db.Comments.Where(c => c.BlogID == id).ToList();

  return PartialView("_Comments", comments);
}

The problem is that there  will be a list of comments, and there is a "textarea" for adding more comments on the fly.  Will the solution you suggested still work?  I don’t have the option of moving the Partial out of the _ApplicationLayout.cshtml.  Also,
how can I specify the controller where the ActionResult is in the code:

@Html.Action("GetComments"new { id = ViewBag.loanApplicationId})
?

You can specify the Controller as another parameter of the Action helper:

@Html.Action("GetComments", "Home", new { id = ViewBag.loanApplicationId })

As for your text-area, just give this input a name that matches the post-action param:

@using Html.BeginForm("AddNewComment"))
{
@Html.Hidden("ApplicationId", ViewBag.loanApplicationId)
<div>
Add Comment: @Html.TextArea("NewComment")
</div>

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

Action:

[HttpPost]
public ActionResult AddNewComment(int ApplicationId, string NewComment)
{
  // use ApplicationId to fetch the record
// add NewComment to the record

return redirectToAction("Index"); }

That’s a fairly simple solution.  If you have questions, ask away

Okay, I think I understand it now.  The only other question I have is if they should add a comment (remember they could be on any View page in the project), Once the comments pane is updated the user is has to return to the same view.  From what I have read
online, this should be some sort of "child action only".  Is that correct?

By the way, you are really awesome to have taken the time to help me!  I wish I could send you a gift!

So what you want to do is use an Ajax form, process the comment, then return a fresh instance of your Partial view back to the main View.  Let’s go through the whole thing, but with the ajax:

1) In your _Layout, you’ve got the Html.Action(…) helper.  We should wrap this in a <div> tag because we’re going to update this after our ajax-post

<div id="commentsDiv">
  @Html.Action("GetComments", "Home", new { id = ViewBag.loanApplicationId })
</div>

2) In your partial view, you’ve got your form that allows the user to add a comment.  We’re going to change this to an Ajax form

@using (Ajax.BeginForm("AddNewComment", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "commentsDiv" }))
{
  @Html.Hidden("AppId", ViewBag.loanApplicationId)
  <div>
    Add Comment: @Html.TextArea("NewComment")
  </div>

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

3) In the post-action, we process the new comment, then return our *UPDATED* _Comments partial view back to the view

[HttpPost]
public ActionResult AddNewComment(int AppId, string NewComment)
{
  // use ApplicationId to fetch the record
// add NewComment to the record

var comments = db.Comments.Where(c => c.ApplicationId == AppId).ToList();

return PartialView("_Comments", comments); }

And that’s it!  Now it’s important to note that you MUST have the unobtrusive-ajax scripts included in your View.  If you are unsure whether you have these, check your Scripts folder (download them from the NuGet manager if needed).

I received the following error when I tried to run this:

"Additional information: Error executing child request for handler ‘System.Web.Mvc.HttpHandlerUtil"

I tried to run in without the Id in the parameters and just hardcoded the ID in the method just for testing.  Here is what is in my _ApplicationLayout:

  <div id="PageClassDiv" class="@(ViewBag.PageClass) APPLICATION"><!-- page content container-->
        
        @Html.Partial("~/Views/Shared/_NavigationView.cshtml") <!-- Navigation Partial View -->
        @Html.Partial("~/Views/Shared/_SearchAccordionView.cshtml") <!-- Search Accordion Partial View -->

        <!-- All applications should have comments and sidebar ============================================================================================-->
        @Html.Partial("~/Views/Shared/_SideBarView.cshtml");
        @*@Html.Partial("~/Views/Shared/_CommentsView.cshtml");*@
        @Html.Action("GetComments", "LoanApplication")
        
        <!-- content ============================================================================================-->
        @if (angularEnabled)
        {
            <div class="container" ng-app="@angularAppName">@RenderBody()</div>
        }
        else
        {
            <div class="container">@RenderBody()</div>
        }
    </div><!-- end page content container-->

This is the CommentsView:

<span class="comments">
    <a id="right-menu" href="#right-menu" class="icon-comments"></a>
</span>
<span class="clear"></span>

<div id="sidr-right" class="sidr right">
    <header>
        <h4> Application Notes </h4>
        <a href="#" class="icon-print"></a>
        @using (@Html.BeginForm("Comment", "LoanApplication"))
        {
           @Html.TextArea("Comment")
        @*<textarea cols="100" rows="2" name="Comment" placeholder="Leave Comment ..."></textarea>*@
            <input value="Add Comment" type="submit" />
        }
    </header>

And this is what is in my controller:

  [HttpGet]
        [Route("GetComments")]
        public async Task<ActionResult> GetComments()
        {
            var loanApplicationServiceProxy = base.ServiceProvider.LoanApplicationServiceProxy;

            var comments = await loanApplicationServiceProxy.GetLoanApplicationCommentsByLoanApplicationIdAsync(loanApplicationId) ?? new List<LoanApplicationComment>();
            
            return PartialView("_CommentsView", comments);
        }


 [HttpPost]
        [Route("Comment")]
        public async Task<ActionResult> Comment(FormCollection form)
        {

            var loanApplicationServiceProxy = base.ServiceProvider.LoanApplicationServiceProxy;
            var userId = this.User.Identity.GetUserId();
            string comment = Request.Form["Comment"];
            var applicationComment = new LoanApplicationComment
            {
                Comment = comment,
                CreatedDate = DateTime.Now,
                LoanApplicationId = loanApplicationId,
                Id = Guid.NewGuid(),
                CreatedBy = Guid.Parse(userId)
            };
            await loanApplicationServiceProxy.PutLoanApplicationCommentAsync(applicationComment);

            var comments = loanApplicationServiceProxy.GetLoanApplicationCommentsByLoanApplicationIdAsync(loanApplicationId);

            return View(comments);
         
        }

The code in the Controller "GetComments" never gets hit.  The application throws an error as soon as I try to navigate to a View page that has the comments pane.

BeeDev

The code in the Controller "GetComments" never gets hit.

take off the [HttpGet] and [Route("GetComments")] annotations, and see if that works.

I was able to get it to hit the controller, but I can’t figure out how to actually display the comments.  I’m used to using @model.Comment, or something of the sort, but there is not model, so how do I specify the fields that I need to display?  I must display
the user name, date and time of comment, along with the comment.

This is going beyond the original scope of the question.  If I understand everything correctly, your _Comments partial view displays rows of comments that include user name, date & time of comment, and the comment.

The model for Comment may look something like this (I’m just guessing since you have not posted the actual model):

public class Comment
{
public int CommentId { get; set; } public string Comment { get; set; }
public string UserName { get; set; } public string CDate { get; set; }
public int App_ID { get; set; } }

The model includes a primary index key (CommentId), the other required fields, and also a foreign key reference (App_ID)

The _Comment partial view may then look like this:

@model IEnumerable<AppName.Models.Comment>

<h2>Submit Comment</h2>

@using (Ajax.BeginForm("AddNewComment", "LoanApplication", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "commentsDiv" }))
{
  @Html.Hidden("AppID", ViewBag.loanApplicationId)
  <div>
    Comment: @Html.TextArea("NewComment")
  </div>

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

<h2>Comments</h2>

@foreach (var item in Model)
{
  <div>
    <dl class="dl-horizontal">
      <dt>Username</dt>
      <dd>@Html.DisplayFor(modelItem => item.UserName)</dd>

      <dt>Date</dt>
      <dd>@Html.DisplayFor(modelItem => item.CDate)</dd>

      <dt>Comment</dt>
      <dd>@Html.DisplayFor(modelItem => item.Comment)</dd>
    </dl>
  </div>
}

To explain, our @model is a LIST of comments that will be passed to the partial view.  At the top I’ve included the AJAX form, which allows a user to submit their comment.  Below the form is the Comments section, which loops through each comment, displaying
the User, the Date, and the Comment (I used DL formatting but you can use TABLE or DIV, etc).  Now when the form posts and finishes processing, we’ll be returning a fresh _Comments partial view, which will replace the old one.  We use "UpdateTargetId" to specify
where to update.

Your AJAX post-action in your "LoanApplication" controller:

[HttpPost]
public ActionResult AddNewComment(int AppID, string NewComment)
{
  // create new comment object
  var comment = new Comment();
  comment.Comment = NewComment;
  comment.UserName = User.Identity.Name;
  comment.CDate = DateTime.Now;
  comment.App_ID = AppID;

  // add comment to db
  db.Comments.Add(comment);
  db.SaveChanges();

// query new comments list and return to partial view var comments = db.Comments.Where(c => c.App_ID == AppID).ToList(); return PartialView("_Comments", comments); }

I’ve commented this for explanation.

Your _Layout view now only needs to have the initial Action helper inside a named DIV

<div id="commentsDiv">
  @Html.Action("GetComments", "LoanApplication", new { id = ViewBag.loanApplicationId })
</div>

As said earlier, once the AJAX form posts, a new version of _Comments partial view will replace the contents of "commentsDiv".

Lastly, the "GetComments" action (in the LoanApplication controller):

public ActionResult GetComments(int id)
{
  var comments = db.Comments.Where(App_ID == id).ToList();

  return PartialView("_Comments", comments);
}

And that’s it.  There’s the entire solution…  If all of this works for you, please take a moment to mark all my responses as answers, as they all answer each of your subsequent questions.  Thanks.

Okay, I figured out that I can put a model in the _CommentsView.cshtml since it is being rendered with an @Html.Action.  Thanks for ALL of your help!  You are awesome!!!

[RESOLVED]Convert ajax call into chunked calls of 100 for a URL

Excuse me here, I’m rather new to this, so please bear with me.

I have been given the task as stated in the subject, to break the ajax call into chunks of 100.  This is being done as to not run out of URL space.  My instinct (which is probably wrong) is to pass it through as an array.  This is where I’m hitting a wall.
 Here is a chunk of code in the index of Views.

$(document).ready(function() {
var imageNos = ‘@Model.ImageNos’;
var array = imageNos.split(‘,’);

var oTable = $(‘#imageTable’).dataTable(
{
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "ImageData/GetList",
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bJQueryUI": true,
"aoColumns": [
{ "bSortable": false, "bSearchable": false },
null,
null,
null,
null,
null,
null,
null
],
"fnServerData": function(sSource, aoData, fnCallback) {
aoData.push({ "name": "ImageNos", "value": array });
$.getJSON(sSource, aoData, function(json) {
fnCallback(json)
});
},
"fnRowCallback":function(nRow, aaData) {
var imageno = aaData[1];
$.get("ImageData/ImageDetails?imageNo=" + imageno, function (details) {
oTable.fnOpen(nRow, details, ‘details’);
});
return nRow;
}
});

here is how I;m trying to pass it through to the controller.

public ActionResult GetList(string[] value)
{
var imageNos = new List<long>();
try
{
if (!string.IsNullOrEmpty(value))
{
/*var imgs = ImageNos.TrimEnd(‘,’).Split(‘,’).ToList();
imageNos.AddRange(imgs.Select(i => Convert.ToInt64(i)));*/
}

long totalImages;
var images = ImageRepository.GetSelectedImages(imageNos);
var imageDataModels = images as IList<ImageDataModel> ?? images.ToList();
return Json(new
{
iTotalRecords = imageDataModels.Count,
iTotalDisplayRecords = imageDataModels.Count,
aaData = imageDataModels.Select(x => new[]
{…………

As it is now, I’m getting errors

Error 1 The best overloaded method match for ‘string.IsNullOrEmpty(string)’ has some invalid arguments and 

Error 2 Argument 1: cannot convert from ‘string[]’ to ‘string’ 

I know this is a lot of code, and i’m not even sure I have posted anything that could help someone assist me, but any help on this would be greatly appreciated; I’m feeling a bit overwhelmed and underwater.

edit: I meant to say beforehand that everything works fine before I try the array above, before I split it in the index

I can’t really follow what the code is doing, but you’re getting that error as

string.IsNullOrEmpty(value)

in the above "value" is an array, and IsNullOrEmpty works on strings, not arrays of strings.  If you want to check if an array isn’t empty try

if (value != null && value.Length >0)

Not saying that’s going to fix your issue, but it will get your code to compiled.  Also if you’re worried about "running out of url space" then just POST your data rather than using GET and you don’t need to worry.