Click here to Skip to main content
14,692,430 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
How can I accomplish passing the json data to this view and turning the view into and updating form instead of a create form?

What I have tried:

I have the following angular table with an edit button

<table class="tableData" border="0" cellspacing="0" cellpadding="0">
       <thead>
           <tr>
               <th></th>
               <th>Budget Name</th>
               <th>Year</th>
               <th>Month</th>
              <th></th>
              
           </tr>
       </thead>
        <tbody ng-repeat="(ind,O) in budgetdetails">
            <tr ng-class-even="'even'" ng-class-odd="'odd'">
             
                <td class="CX"><span>+</span></td>
                <td>{{O.budget.BudgetName}}</td>
                <td>{{O.budget.Year}}</td>
                <td>{{O.budget.Month}}</td>
                <td><input type="button" value="Remove" class="btn btn-primary" data-ng-click='removeRow(O)' />
                    <input type="button" value="Edit" class="btn btn-primary" data-ng-click='EditRow(O)' /></td>
              
            </tr>
            <tr class="sub">
                <td></td>
                <td colspan="5">
                    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <th>Category</th>
                            <th>SubCategory</th>
                            <th>Amount</th>
                         
                        </tr>
                        <tr ng-repeat="(indx,a) in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'">
                            <td>{{a.Category}}</td>
                            <td>{{a.Subcategory}}</td>
                            <td>{{a.Amount| currency}}</td>
                      
                        </tr>
                @*        <tr>
                <td colspan="2">Total</td>
                <td></td>
                <td>{{Totals().Amount| currency}}</td>
                
            </tr>*@
                    </table>
                </td>
            </tr>
        </tbody>
    </table>


I want to be able to edit the data when I click on the edit button so far I have been playing with the angular controller and I have this

$scope.EditRow = function (item) {

        $scope.budget = item.budget;
        $scope.idBudget = item.budget.idBudget;
        $scope.BudgetName = item.budget.BudgetName;
        $scope.Year = item.budget.Year;
        $scope.Month = item.budget.Month;
     
         resp=BDetail.FindBudgetById(item.budget.idBudget);

    };


The last line call a json and returns a set of data which I want to send to the page were I create the budgets for editing. Now I am not sure how to send the json to another page and the page that receives it is the View were I create the budgets and it has an IEnumerable editor to repeat the budgets details. Code is as follows

@model BudgetPortalMVC4.Models.budget

     @{
    ViewBag.Title = "NewBudget";
    Layout = "~/Views/Shared/_Layout.cshtml";
  
     }
      @Scripts.Render("~/bundles/jquery")
    <script src="../../Scripts/jquery.validate.js" type="text/javascript">  </script>
     <script src="~/Scripts/jquery.validate.unobtrusive.min.js"     type="text/javascript"></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>

    <h3>Budget Detail</h3>

   <div> <input type="button" id="addbudgetdetail" value="Add row" /></div>

    <div id="new-budgetdetail">

    @Html.EditorForMany(x => x.budgetdetails)


   </div>
     <input type="submit" />


    </div>
    @section Scripts{

   <script type="text/jscript">


   var url = '@Url.Action("GetSubCategories", "Budget")'; // Do not hard code your url's
   $(document).on('change', '.SelectedCategory', function () {
       var subCategory = $(this).closest('.item').find('.SelectedSubCategory');
       subCategory.empty();
       $.getJSON(url, { id: $(this).val() }, function (data) {
           if (!data) {
               return;
           }
           subCategory.append($('<option></option>').val('').text('Please select')); // Do not give the option a value!
           $.each(data, function (index, item) {
               subCategory.append($('<option></option>').val(item.Value).text(item.Text));
           });
       });
   });

   $(function () {
       $('#addbudgetdetail').on('click', function () {
           jQuery.get('@Url.Action("AddBudgetDetail", "Budget")').done(function (html) {
               $('#new-budgetdetail').append(html);
               $('form').data('validator', null);
               $.validator.unobtrusive.parse($('form'));

           });
       });

       $(".deleteRow").on("click", '', function () {
           $(this).parents("#budgetRow:first").remove();
           return false;
       });

   });



    </script>

     }
    }
Posted
Updated 14-Jul-16 21:00pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900