刷新 MVC 控制器中的部分视图

huangapple go评论70阅读模式
英文:

Refresh PartialView in MVC Controller

问题

我试图在提交表单后刷新我的部分视图,该表单将在我的控制器中处理。问题是,每当我尝试从我的控制器刷新它时,我会被重定向到一个带有部分视图内容的空白页面。

部分视图:

@model Smarty.Viewmodels.BugViewModel

<div class="modal fade" id="bugModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bug Reporting Tool</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <form asp-controller="Smarty" asp-action="SendBugReport" enctype="multipart/form-data">

                @if (!string.IsNullOrWhiteSpace(ViewBag.message))
                {
                    if (!ViewBag.IsError)
                    {
                        <span class="border border-success text-success">@ViewBag.message</span>
                    }
                    else
                    {
                        <span class="border border-danger text-danger">@ViewBag.message</span>
                    }
                }
                <div class="modal-body">
                    <label asp-for="Description" class="control-label"></label>
                    <textarea asp-for="Description" class="form-control"></textarea>
                    <span asp-validation-for="Description" class="text-danger"></span>

                    <label asp-for="FormFile" class="control-label"></label><br />
                    <input asp-for="FormFile" type="file" />
                    <span asp-validation-for="FormFile" class="text-danger"></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
                    <button type="submit" id="BugReportBtn" class="btn btn-success">Bug Report senden</button>
                </div>
            </form>
        </div>
    </div>
</div>

控制器:

public async Task<IActionResult> SendBugReport(BugViewModel viewModel)
{
    // 处理表单

    return PartialView("BugModal", viewModel);
}

提前感谢!

英文:

I'm trying to refresh my Partial View after submitting a form which will be processed in my controller. The problem is that whenever I try to refresh it form my controller, I get redirected to a blank page with content from the Partial View.

Partial View

@model Smarty.Viewmodels.BugViewModel
&lt;div class=&quot;modal fade&quot; id=&quot;bugModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;
&lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h5 class=&quot;modal-title&quot;&gt;Bug Reporting Tool&lt;/h5&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
&lt;span&gt;&amp;times;&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;form asp-controller=&quot;Smarty&quot; asp-action=&quot;SendBugReport&quot; enctype=&quot;multipart/form-data&quot;&gt;
@if (!string.IsNullOrWhiteSpace(ViewBag.message))
{
if (!ViewBag.IsError)
{
&lt;span class=&quot;border border-success text-success&quot;&gt;@ViewBag.message&lt;/span&gt;
}
else
{
&lt;span class=&quot;border border-danger text-danger&quot;&gt;@ViewBag.message&lt;/span&gt;
}
}
&lt;div class=&quot;modal-body&quot;&gt;
&lt;label asp-for=&quot;Description&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
&lt;textarea asp-for=&quot;Description&quot; class=&quot;form-control&quot;&gt;&lt;/textarea&gt;
&lt;span asp-validation-for=&quot;Description&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
&lt;label asp-for=&quot;FormFile&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;&lt;br /&gt;
&lt;input asp-for=&quot;FormFile&quot; type=&quot;file&quot; /&gt;
&lt;span asp-validation-for=&quot;FormFile&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Schliessen&lt;/button&gt;
&lt;button type=&quot;submit&quot; id=&quot;BugReportBtn&quot; class=&quot;btn btn-success&quot;&gt;Bug Report senden&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

Controller

public async Task&lt;IActionResult&gt; SendBugReport(BugViewModel viewModel)
{
//Process Form
return PartialView(&quot;BugModal&quot;, viewModel);
}

Thanks in advance!

答案1

得分: 1

以下是您要的代码部分的中文翻译:

  1. 在部分视图中显示空白页面的重定向

    预期出现这种情况是因为您使用了return PartialView(),这将返回简单的部分HTML以在视图中呈现它。

  2. 我想要刷新部分视图,显示错误消息、成功消息等内容

    您不能从SendBugReport操作中获取@ViewBag.message,它是从主页面的操作传递过来的。

    正如注释中所说的那样,首先,您可以使用Ajax将表单提交到SendBugReport操作。然后,该操作返回messageisError JSON数据给Ajax的成功函数。最后,根据isError的值在视图上呈现message

    1. 部分视图(Views/Shared/BugModal.cshtml)

      @model BugViewModel
      
      <div class="modal fade" id="bugModal" tabindex="-1" role="dialog">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title">Bug Reporting Tool</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span>&times;</span>
                      </button>
                  </div>
                  <form id="myForm" asp-controller="Smarty" asp-action="SendBugReport" enctype="multipart/form-data">
                      <div id="result"></div>
                      <div class="modal-body">
                          <label asp-for="Description" class="control-label"></label>
                          <textarea asp-for="Description" class="form-control"></textarea>
                          <span asp-validation-for="Description" class="text-danger"></span>
      
                          <label asp-for="FormFile" class="control-label"></label><br />
                          <input asp-for="FormFile" id="FormFile" name="FormFile" type="file" />
                          <span asp-validation-for="FormFile" class="text-danger"></span>
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
                          <button type="button" id="BugReportBtn" class="btn btn-success">Bug Report senden</button>
                      </div>
                  </form>
              </div>
          </div>
      </div>
      <script src="~/lib/jquery/dist/jquery.js"></script>
      <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
      <script>
          $('#BugReportBtn').on('click', function (event) {
      
              var url = "/Smarty/SendBugReport";
      
              var description = document.getElementById("Description").value;
              var fileInput = $('#FormFile')[0];
              var formFile = fileInput.files[0];
      
              var formData = new FormData();
              formData.append("Description", description);
              formData.append("FormFile", formFile);
      
              $.ajax({
                  type: "POST",
                  url: url,
                  data: formData,
                  dataType: "json",
                  processData: false,
                  contentType: false,
                  success: function (data) {
                      if (!data.isError) {
                          $("#result").html("<span class='border border-success text-success'>" + data.message + "</span>");
                      } else {
                          $("#result").html("<span class='border border-danger text-danger'>" + data.message + "</span>");
                      }
                      $('#bugModal').modal('show');
      
                  }
      
              });
      
      
          });
      </script>
      
    2. 操作

      [HttpPost]
      public async Task<JsonResult> SendBugReport(BugViewModel viewModel)
      {
          // 处理表单
      
          string message;
          bool isError;
      
          // 将数据设置到message和isError中
          return Json(new { message, isError });
      
      }
      
英文:

> I get redirected to a blank page with content from the Partial View.

That is expected because you use return PartialView() which will return the simple partial html to render it into the view.

> I want to refresh the Partial View with content like Error Messages, Success messages etc

You could not get @ViewBag.message from the SendBugReport action, it is passed from the action of main page.

As the comment has said that, first of all, you could use ajax to submit the form to SendBugReport action.Then the action return message and isError json data to ajax success function. Finally, you render message on the view based on the value of isError:

1.Partial View (Views/Shared/BugModal.cshtml)

@model BugViewModel
&lt;div class=&quot;modal fade&quot; id=&quot;bugModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot;&gt;
&lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-header&quot;&gt;
&lt;h5 class=&quot;modal-title&quot;&gt;Bug Reporting Tool&lt;/h5&gt;
&lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
&lt;span&gt;&amp;times;&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;form id=&quot;myForm&quot; asp-controller=&quot;Smarty&quot; asp-action=&quot;SendBugReport&quot; enctype=&quot;multipart/form-data&quot;&gt;
&lt;div id=&quot;result&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;label asp-for=&quot;Description&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
&lt;textarea asp-for=&quot;Description&quot; class=&quot;form-control&quot;&gt;&lt;/textarea&gt;
&lt;span asp-validation-for=&quot;Description&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
&lt;label asp-for=&quot;FormFile&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;&lt;br /&gt;
&lt;input asp-for=&quot;FormFile&quot; id=&quot;FormFile&quot; name=&quot;FormFile&quot; type=&quot;file&quot; /&gt;
&lt;span asp-validation-for=&quot;FormFile&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;modal-footer&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Schliessen&lt;/button&gt;
&lt;button type=&quot;button&quot; id=&quot;BugReportBtn&quot; class=&quot;btn btn-success&quot;&gt;Bug Report senden&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;~/lib/jquery/dist/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;~/lib/bootstrap/dist/js/bootstrap.bundle.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(&#39;#BugReportBtn&#39;).on(&#39;click&#39;, function (event) {
var url = &quot;/Smarty/SendBugReport&quot;;
var description = document.getElementById(&quot;Description&quot;).value;
var fileInput = $(&#39;#FormFile&#39;)[0];
var formFile = fileInput.files[0];
var formData = new FormData();
formData.append(&quot;Description&quot;, description);
formData.append(&quot;FormFile&quot;, formFile);
$.ajax({
type: &quot;POST&quot;,
url: url,
data: formData,
dataType: &quot;json&quot;,
processData:false,
contentType: false,
success: function (data) {
if (!data.isError) {
$(&quot;#result&quot;).html(&quot;&lt;span class=&#39;border border-success text-success&#39;&gt;&quot; + data.message + &quot;&lt;/span&gt;&quot;);
} else {
$(&quot;#result&quot;).html(&quot;&lt;span class=&#39;border border-danger text-danger&#39;&gt;&quot; + data.message + &quot;&lt;/span&gt;&quot;);
}              
$(&#39;#bugModal&#39;).modal(&#39;show&#39;);
}
});
});
&lt;/script&gt;

2.Action

[HttpPost]
public async Task&lt;JsonResult&gt; SendBugReport(BugViewModel viewModel)
{
//Process Form
string message;
bool isError;
//set data to message and isError
return Json(new { message, isError });
}

huangapple
  • 本文由 发表于 2020年1月4日 01:17:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/59582686.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定