Как обновить Частичное представление после поста Ajax - PullRequest
0 голосов
/ 17 октября 2019

У меня есть кнопка в моем частичном представлении (FinanceList), когда я нажимаю кнопку, я открываю представление createitems для сохранения записей.

<input type="button" id="btnaddnew" class="btn-success pull-left" style="height:30px;width:140px;font-size:16px" value="+Add new record" onclick="window.open('/Projects/CreateItems'+ '?id=7', 'popUpWindow', 'height=500,width=500');">

У меня есть метод Ajax Post в моем представлении createItems, в методе Post я успешно сохраняю записи в базе данных, но как мне нужно закрыть всплывающее окно mmy CreateItems и обновить мое частичное представление?

 <script type="text/javascript">
  $(document).ready(function () {
      $('.button').on("click", function () {
          $.ajax({
              url: applicationHostPath + 'Projects/CreateItems',
              datatype: 'json',
              data: $("form").serialize(),
              success: function (response) {
                  if (response != null) {
                      $('#displayproContainer').load('/Projects/FinanceList' + "&id=" + 2);

                  }
              }
          })
        });
    });        
    </script>

Контрольный код, где мне нужно вернуть это представление ?? чтобы мой частичный вид обновился?

[HttpPost]
    public ActionResult CreateItems(ModelClass model)
    {
        //My DB Save Method
        return View();
    }

1 Ответ

0 голосов
/ 18 октября 2019

Вот способ сделать это.

Прямая ссылка https://dotnetfiddle.net/gcx8Ds

Контроллер / Просмотр модели

namespace WebApplicationSkip1.Controllers
{
    public class ModelClass
    {
        public string FinanceItem { get; set; }
    }
    public class HomeController : Controller
    {
        [HttpPost]
        public ActionResult Index16(ModelClass model)
        {
            ViewBag.FinanceItem = model.FinanceItem;
            //clearing out the model after populating a viewbag
            model.FinanceItem = String.Empty;
            return View(model);
        }

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

Просмотр

@model WebApplicationSkip1.Controllers.ModelClass
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index16</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body>
    @using (Html.BeginForm())
    {
        @*https://getbootstrap.com/docs/4.0/components/modal/*@
        <p>Finance list</p>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Create Items
        </button>
        <div id="theResult"></div>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Create Items</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @Html.LabelFor(r => r.FinanceItem)
                        @Html.TextBoxFor(r => r.FinanceItem)
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    }
    <div>
        @if (ViewBag.FinanceItem != null)
        {
            @ViewBag.FinanceItem
        }
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...