编辑angularjs表中的行

时间:2016-07-15 04:03:46

标签: angularjs json asp.net-mvc-4

我有以下带有编辑按钮的角度表

<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>

我希望能够在我点击编辑按钮时编辑数据到目前为止我一直在玩角度控制器而且我有这个

$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);

};

最后一行调用json并返回一组我要发送到页面的数据,我创建了预算进行编辑。现在我不确定如何将json发送到另一个页面,接收它的页面是View我创建了预算,它有一个IEnumerable编辑器来重复预算细节。代码如下

@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>

  }
 }

如何完成将json数据传递到此视图并将视图转换为更新表单而不是创建表单?

0 个答案:

没有答案