knockout.js 你可以只更新部分视图而不是整个页面的帖子吗?

jtjikinw  于 2022-11-10  发布在  其他
关注(0)|答案(5)|浏览(139)

有没有一种方法可以在www.example.com mvc中提交部分视图表单asp.net,而不需要重新加载父页面,而是只将部分视图重新加载到它的新状态?类似于knockout.js使用数据绑定进行更新的方式。
我的数据表呈现了可变数量的列/名称,所以我认为knockout.js不是这个的一个选项,所以我尝试使用部分视图代替。

t9aqgxwy

t9aqgxwy1#

没有jQuery就不行。
你需要做的就是把你的Partial放在一个div中,类似于:

<div id="partial">
    @Html.Partial("YourPartial")
</div>

然后,要进行更新(例如,单击id为button的按钮),您可以执行以下操作:

$("#button").click(function () {
   $.ajax({
       url: "YourController/GetData",
       type: "get",
       data: $("form").serialize(), //if you need to post Model data, use this
       success: function (result) {
           $("#partial").html(result);
       }
   });
})

然后,您的操作将类似于:

public ActionResult GetData(YourModel model) //that's if you need the model
{
    //do whatever

    return View(model);
}
a14dhokn

a14dhokn2#

实际上,如果Partial有一个子动作方法,你可以直接发布(或者使用锚链接)到子动作,并获得类似Ajax的效果。
语法为

@Html.Action("MyPartial")

子操作为

public ActionResult MyPartial()
{
    return PartialView(Model);
}

如果您的表单张贴到子动作

@using (Html.BeginForm("MyPartial"))
{
    ...
}

将使用从子操作返回的局部视图更新局部视图。

Jquery仍然是一种合法的更新局部的方法。但是从技术上讲,你的问题的答案是肯定的。

gwbalxhn

gwbalxhn3#

通常,我发现人们给予的信息太有限了,所以我会在这里提供帮助。关键是设置一个div,它带有一个ID,你可以将返回的html附加到该ID上。另外,当点击你的控制器时,确保它返回部分。这种方法有一些潜在的问题,但在一个好的日子里,它应该能工作。

<div id="CategoryList" class="widget">
    @{
        Html.RenderPartial("WidgetCategories.cshtml");
    }
</div>

          function DeleteCategory(CategoryID) {
            $.get('/Dashboard/DeleteWidgetCategory?CategoryID=' + CategoryID,
                function (data) {
                    if (data == "No") {
                        alert('The Category has report widgets assigned to it and cannot be deleted.');
                    }
                    else {
                        $('#CategoryList').html(data);
                    }

                }
            );
        }

    [HttpGet("DeleteWidgetCategory")]
    [HttpPost("DeleteWidgetCategory")]
    public IActionResult DeleteWidgetCategory(string CategoryID)
    {
        string Deleted = CategoryModel.DeleteCategory(CategoryID);

        if (Deleted == "Yes")
        {
            return PartialView("WidgetCategories");
        }
        else
        {
            return this.Json("No");
        }
    }
bihw5rsg

bihw5rsg4#

我将使用 AJAX 表单帮助器来处理这样的场景,使用局部视图和@html.RenderPartial(“partialName”)partial helpers

yiytaume

yiytaume5#

在主视图中

<div id=SearchResult>
   @Html.Partial("_NameOfPartialView", Model)
</div>

<input type="button" id="btnSubmit" value="Submit">

在Javascript文件中

$('#btnSubmit').click(function () {
    GetData(Id);
});

function GetData(Id){
  $.ajax({
     url: "/Home/GetEmployee/",
     type: "get",
     data: { Id:Id },
     success: function (result) {
     $('#SearchResult').html(result);
     }
   });
}

在家庭控制器中

public ActionResult GetEmployee(int Id)
{
   var employee= context.Employee.Where(x=> x.EmployeeId == Id)

   return this.PartialView("_NameOfPartialView", employee);
}

相关问题