I am new to MVC and I am trying to use a blank webgrid in my view the same way you use a DataGrid in asp.net. I want to be able to add rows to the webgrid when clicking an option and binding cascade drop downs when adding the new row for selections. Update and delete options will be a nice to have. I then want to take the rows I have created in my webgrid and save them to my database.

This is my data model:

       public partial class NewBudgetModel
      {

        public IEnumerable<category> categories { get; set; }
        public IEnumerable<budget> budgets { get; set; }
        public List<budgetdetail> budgetdetail { get; set; }

        public int idCategory { get; set; }
        public int idSubCategory { get; set; }
        public string BudgetName { get; set; }
        public int Year { get; set; }
        public string Month { get; set; }
        public double Amount { get; set; }

    }

This is my controller:

 private BudgetModelContainer _db = new BudgetModelContainer();
    //
    // GET: /Budget/
    [Authorize]
    public ActionResult NewBudget()
    {

        var budgets = from r in _db.budgets
                      select r;

        var categories = from r in _db.categories
                         select r;

        var budgetdetails = from r in _db.budgetdetails
                         select r;

        var model = new NewBudgetModel { categories = categories.ToList(), budgets = budgets.ToList(), budgetdetail=budgetdetails.ToList() };


        return View(model);


    }
    [Authorize]
    public ActionResult GetCategories()
    {
        IQueryable categories = _db.categories;
        if (HttpContext.Request.IsAjaxRequest())
        {

            return Json(new SelectList(categories, "idCategory", "CategoryName"), JsonRequestBehavior.AllowGet);
        }

        return View(categories);
    }

    [Authorize]
    public ActionResult GetSubCategories(int idCategory)
    {
        IQueryable subcategories = _db.subcategories.Where(c => c.idCategory == idCategory);


        if (HttpContext.Request.IsAjaxRequest())
        {

            return Json(new SelectList(subcategories, "idsubCategory", "SubCategoryName"), JsonRequestBehavior.AllowGet);
        }

        return View(subcategories);

    }

    public static List<SelectListItem> GetDropDownListForYears()
    {
        List<SelectListItem> ls = new List<SelectListItem>();

        for (int i = DateTime.Now.Year; i <= DateTime.Now.AddYears(50).Year; i++)
        {
            ls.Add(new SelectListItem() { Text = i.ToString(), Value = i.ToString() });
        }

        return ls;
    }

    public static List<SelectListItem> GetDropDownListForMonth()
    {
        List<SelectListItem> ls = new List<SelectListItem>();

        for (int i =1; i <= 12; i++)
        {
            string strMonthName = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i);
            ls.Add(new SelectListItem() { Text = strMonthName, Value = i.ToString() });
        }

        return ls;
    }

This is my view ( the webgrid is not added yet, I do have the 2 cascade listboxes I want to bind to the gridview in the view, they are in bold letters):

@model BudgetPortalMVC4.Models.NewBudgetModel

@{
ViewBag.Title = "NewBudget";
Layout = "~/Views/Shared/_Layout.cshtml";

}

 @Scripts.Render("~/bundles/jquery")
<script type="text/jscript">
$(function () {
    $.getJSON("/NewBudget/Categories/List/", function (data) {
        var items = "";
        $.each(data, function (i, category) {
            items += "<option value='" + category.Value + "'>" +category.Text + "</option>";
        });
        $("#Category").html(items);
    });



    $("#Category").change(function () {
        $.getJSON("/NewBudget/SubCategories/List/" + $("#Category > option:selected").attr("value"), function (data) {

            var items = "";
            $.each(data, function (i, subcat) {
                items += "<option value='" + subcat.Value + "'>" + subcat.Text + "</option>";
            });
            $("#SubCategory").html(items);
        })
    });
});
 </script>
 <h2>NewBudget</h2>

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true) 
<div>

<table>

<tr>
<td>
     <div class="editor-label">
            @Html.LabelFor(model => model.BudgetName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.BudgetName)
            @Html.ValidationMessageFor(model => model.BudgetName)
        </div>
</td>
<td>
 <div class="editor-label">
            @Html.LabelFor(model => model.Year)
        </div>
<div>
  @Html.DropDownListFor(model => model.Year,         BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForYears())
    @Html.ValidationMessageFor(model => model.Year)
    </div>

</td>
<td>
  <div class="editor-label">
            @Html.LabelFor(model => model.Month)
        </div>
<div>
  @Html.DropDownListFor(model => model.Month, BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForMonth())
    @Html.ValidationMessageFor(model => model.Month)
    </div>

</td>

</tr>

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

    <label for="Category">Categories</label>
   <select id="Category"  name="Category" size="10" style =     "width:150px">  </select>



  </td>
  <td>
 <img src="../../Images/rightbluearrow.png" alt="" height="50"  width="100"/>
   </td>
   <td>

<label for="SubCategory">SubCategories</label>
  <select id="SubCategory"  name="SubCategory"  size="10" style =   "width:150px"></select>
   </td>
        <td>
            <div class="editor-label">
                   @Html.LabelFor(model => model.Amount)
              </div>
               <div class="editor-field">
                    @Html.EditorFor(model => model.Amount)
                     @Html.ValidationMessageFor(model => model.Amount)

           </div>

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

      }

Could someone show me how to build my webgrid following my specifications?

Related posts

Recent Viewed