Question

C＃asp.net MVC项目：我的索引页面里面有一个按钮，我想按下它并更新同一页面，并附上一些结果。

以下是一些代码：

视图：（使用调用控制器中getConfig方法的按钮）

@{
    ViewBag.Title = "Home Page";
}

<form method="get" action="/Home/GetConfig/" >
    <input type="submit" value="Get Config WS" />
</form>

<p>
    @ViewBag.totalRecords
</p>

控制器：

 public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Test webservices";

            return View();

        }

        public void getConfig()
        {
            string totalRecords = string.Empty;

            wsConfig.config_pttClient client = new wsConfig.config_pttClient();
            wsConfig.getConfigInput gci = new wsConfig.getConfigInput();
            wsConfig.getConfigOutput gco = new wsConfig.getConfigOutput();

            gco = client.getConfig(gci);

            totalRecords = gco.result.totalRecords.ToString();

            ViewBag.totalRecords = totalRecords;

        }

我想按下视图的按钮并在同一页面上显示totalRecords。

我怎样才能做到这一点？

Answer 1

编辑：可能还有其他解决方案，（如果您不介意更新整个页面），但这是我通常会这样做的。

好的，您需要更改一些内容才能使其正常工作：

创建一个新的局部视图，其中只包含您要更新的部分（并将其包装为具有id的元素）。在此示例中，我们将其称为“Partial_TotalCount”＆＃39;。此部分视图将包含以下代码：

<div id="updated">
    <p>
        @ViewBag.totalRecords
    </p>
</div>

现在，更改原始视图，使其包含部分视图：

@{
    ViewBag.Title = "Home Page";
}

<form method="get" action="/Home/GetConfig/" >
    <input type="submit" value="Get Config WS" />
</form>

@Html.Partial("Partial_TotalCount", @Model)

现在，更新您的控制器以使用ajax请求。这将使您的控制器看起来像：

public ActionResult Index()
{
    ViewBag.Message = "Test webservices";

    if (Request.IsAjaxRequest())
    { 
        getconfig(); 
        return PartialView("Partial_TotalCount");
    }

    return View();
}

现在，您需要在单击按钮时提交页面。这可以通过javascript：

完成

首先你的javascript函数将更新内容：

<script type="text/javascript">
    function Refresh() {
        $.ajax({
            url: '/Home/Index',
            type: "GET",
            dataType: "html",
            success: function(data) {
                $("#updated").html(data);
            },
            error: function() { alert('Refreshing error.'); }
        });
    }
</script>

您只需在按钮上添加一个onclick。您也可以从表单周围删除表单标记。

编辑：根据提问者的要求，我对Javascript函数本身提供了一些解释：

$ .ajax意味着我们正在执行Ajax请求。这意味着我们正在与服务器进行一些异步请求。

然后传递几个参数：

Url：应该执行的网址。在您的示例中，url＆＃34; Home / GetConfig＆＃34;后面的代码得到了执行。
类型：您要执行的提交类型（POST，GET，...）
dataType：我们期望从服务器返回的类型。
成功：完成后需要执行的javascript。（在这种情况下，使用id＆＃34; WithCss＆＃34;更新DIV元素，并使用url＆＃34; Home / Getconfig＆＃34;
错误：由于某种原因请求失败时执行的函数。

您可以传递许多其他参数（例如，如果您需要传递ID，以及其他参数。

有关详细说明，请查看原始documentation。

另外，请考虑将此答案标记为已接受。

我希望它有效。

Answer 2

试试这个：

使用以下代码替换输入按钮代码：

<input type="submit" id="btnSave" name="BtnSave" value="Get Config WS" />

然后在控制器中更改此代码的整个代码：

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Test webservices";

            return View();

        }

        public ActionResult getConfig()
        {
          return View();
        }

    [HttpPost]
           public ActionResult getConfig(FormCollection Form)
            {
              if(Form["BtnSave"]!=null)
               {

                string totalRecords = string.Empty;

                wsConfig.config_pttClient client = new wsConfig.config_pttClient();
                wsConfig.getConfigInput gci = new wsConfig.getConfigInput();
                wsConfig.getConfigOutput gco = new wsConfig.getConfigOutput();

                gco = client.getConfig(gci);

                totalRecords = gco.result.totalRecords.ToString();

                ViewBag.totalRecords = totalRecords;
              }
              return View();
            }

希望它有效......！

动态更新布局部分

2 个答案: