ASP.NET MVC中的弹出窗口

发布于 2025-02-10 22:08:01 字数 3810 浏览 1 评论 0原文

如何弹出模态窗口时如何删除菜单部分,因此只保留插入信息的表单。我的代码工作正常。但是,当我按编辑按钮时,它像带有导航栏一样弹出整个窗口。

我的编辑控制器(实体framevork):

    // GET: Products/Edit/5
    public ActionResult Edit(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Product product = db.Products.Find(id);
        if (product == null)
        {
            return HttpNotFound();
        }
        ViewBag.FK_CATEGORY = new SelectList(db.Categories, "CATEGORY_ID",  "CATEGORY_NAME", product.FK_CATEGORY);
        return View(product);
    }

    // POST: Products/Edit/5
    // To protect from overposting attacks, enable the specific properties you want to bind to, for 
    // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "PRODUCT_ID,PRODUCT_NAME,FK_CATEGORY")] Product product)
    {
        if (ModelState.IsValid)
        {
            db.Entry(product).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        ViewBag.FK_CATEGORY = new SelectList(db.Categories, "CATEGORY_ID", "CATEGORY_NAME", product.FK_CATEGORY);
        return View(product);
    }

我的编辑partialView: @model mynewapp5.models.product

         <div class="modal-header">
               <h4 class="modal-title">Edit product</h4>
         </div>

         <!-- Modal body -->
         <div class="modal-body" id="editform">
            <div class="form-horizontal">
                @using (Html.BeginForm("Edit", "Products", FormMethod.Post, new { @id =    "formsubmit" }))
         {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.PRODUCT_ID)

            <div class="form-group">
                @Html.LabelFor(model => model.PRODUCT_NAME, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PRODUCT_NAME, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PRODUCT_NAME, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FK_CATEGORY, "FK_CATEGORY", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("FK_CATEGORY", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.FK_CATEGORY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    }
</div>

和我的索引:

  <div class="modal fade" id="myModal" role="dialog" data-url="@Url.Action("CreatePartialView", "Products")">

  </div>


  <script>
      function editBut() {
    $('.btn-success').click(function () {
        var url = $('#myModalEdit').data('url');
        $.get(url, function (data) {
            $("#myModalEdit").html(data);
            $("#myModalEdit").modal('show');
        });
    });
}
  </script>


  <a href="@Url.Action("Edit", "Products", new { id = item.PRODUCT_ID })" class="btn btn-success" data-toggle="modal" data-target="#myModalEdit" onclick="editBut()">Edit</a> |

How to remove the menu part when the modal window pops up, and so that only the forms for inserting information remain. My code works fine. but when I press Edit button, it popups like the whole window with nav bar.

My Edit controller (Entity Framevork):

    // GET: Products/Edit/5
    public ActionResult Edit(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Product product = db.Products.Find(id);
        if (product == null)
        {
            return HttpNotFound();
        }
        ViewBag.FK_CATEGORY = new SelectList(db.Categories, "CATEGORY_ID",  "CATEGORY_NAME", product.FK_CATEGORY);
        return View(product);
    }

    // POST: Products/Edit/5
    // To protect from overposting attacks, enable the specific properties you want to bind to, for 
    // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "PRODUCT_ID,PRODUCT_NAME,FK_CATEGORY")] Product product)
    {
        if (ModelState.IsValid)
        {
            db.Entry(product).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
        }
        ViewBag.FK_CATEGORY = new SelectList(db.Categories, "CATEGORY_ID", "CATEGORY_NAME", product.FK_CATEGORY);
        return View(product);
    }

My Edit PartialView:
@model MyNewApp5.Models.Product

         <div class="modal-header">
               <h4 class="modal-title">Edit product</h4>
         </div>

         <!-- Modal body -->
         <div class="modal-body" id="editform">
            <div class="form-horizontal">
                @using (Html.BeginForm("Edit", "Products", FormMethod.Post, new { @id =    "formsubmit" }))
         {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.PRODUCT_ID)

            <div class="form-group">
                @Html.LabelFor(model => model.PRODUCT_NAME, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PRODUCT_NAME, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PRODUCT_NAME, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FK_CATEGORY, "FK_CATEGORY", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("FK_CATEGORY", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.FK_CATEGORY, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    }
</div>

And my Index:

  <div class="modal fade" id="myModal" role="dialog" data-url="@Url.Action("CreatePartialView", "Products")">

  </div>


  <script>
      function editBut() {
    $('.btn-success').click(function () {
        var url = $('#myModalEdit').data('url');
        $.get(url, function (data) {
            $("#myModalEdit").html(data);
            $("#myModalEdit").modal('show');
        });
    });
}
  </script>


  <a href="@Url.Action("Edit", "Products", new { id = item.PRODUCT_ID })" class="btn btn-success" data-toggle="modal" data-target="#myModalEdit" onclick="editBut()">Edit</a> |

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

芸娘子的小脾气 2025-02-17 22:08:01

尝试一下

// Open modal in AJAX callback
$('btn-success').click(function(event) {
  event.preventDefault();
  this.blur(); // Manually remove focus from clicked link.
  var url = $('#myModalEdit').data('url')
  $.get(url, function(html) {
    $(html).appendTo('body').modal();
  });
});
<!-- AJAX response must be wrapped in the modal's root class. -->
<div class="modal">
</div>

它取自 https://jquerymodal.com/ 示例4:AJAX

我希望这有帮助

try this

// Open modal in AJAX callback
$('btn-success').click(function(event) {
  event.preventDefault();
  this.blur(); // Manually remove focus from clicked link.
  var url = $('#myModalEdit').data('url')
  $.get(url, function(html) {
    $(html).appendTo('body').modal();
  });
});
<!-- AJAX response must be wrapped in the modal's root class. -->
<div class="modal">
</div>

it's taken from https://jquerymodal.com/ - Example 4: AJAX

I hope this helps

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文