partial-views 相关问题

Asp.Net Web表单中的用户控件,用于代码重用性。部分视图有助于我们减少代码重复。可重复使用的视图,如页眉和页脚视图。

当我使用 jquery 加载 PartialView html 时,使用 0 值 id 参数调用我未调用的控制器

我有这个View Edit.cshtml @model 产品视图模型 @{ 布局=“_Layout”; } 我有这个View Edit.cshtml @model ProdutoViewModel @{ Layout = "_Layout"; } <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="position-static my-5"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a asp-action="Index" asp-controller="Home">Home</a></li> <li class="breadcrumb-item active" aria-current="page">Editar</li> </ol> </nav> <form enctype="multipart/form-data" class="mt-5" id="form-produto" asp-action="Edit" method="post" asp-controller="Produto"> <input hidden value="@Model.Id" name="id"/> <div class="row flex-md-row flex-sm-column"> <div class="col-md-2"> <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Informações</button> <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Imagens</button> <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Relacionados</button> <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button> </div> </div> <div class="tab-content col-md-10" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <div class="container row"> @{ if (Model.Imagens.Where(img => img.Perfil).Count() > 0) { var perfil = Model.Imagens.Where(img => img.Perfil).First(); <div class="col-md-5 col-sm-12 img-container border border-2 rounded-4"> <div id="header-profile" class="row justify-content-end"> <a id="btn-profile" data-img-id="@perfil.Id" class="btn btn-close p-3"></a> </div> <img id="img-profile" class="p-3 card-img image" src="~/images/@(perfil.NomeArquivo+"."[email protected])" /> <div id="input-container" style="display:none"> <div class="input-group mb-3 mt-2"> <label class="btn btn-success custom-file-upload input-group-text w-100 justify-content-center d-flex" for="inputGroupFile01"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01"> </div> </div> </div> } else { <div class="col-md-5 col-sm-12 img-container"> <img id="img-profile" class="p-3 img-thumbnail image" src="~/images/img-icon.png" /> <div class=""> <div class="text">Hello World</div> </div> <div class="input-group mb-3"> <label class="input-group-text" for="inputGroupFile01">Upload</label> <input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01"> </div> </div> } } <div class="col justify-content-between pt-4"> <lable asp-for="Nome">Nome</lable> <input class="form-control" type="text" asp-for="Nome" /> <lable asp-for="Descricao">Descrição</lable> <textarea class="form-control h-auto" asp-for="Descricao"></textarea> <div class="col row d-flex"> <div class="col"> <lable asp-for="Preco">Preço</lable> <input class="form-control" type="text" asp-for="Preco" /> </div> <div class="col"> <lable>Categoria</lable> <select asp-for=IdCategoria class="form-select"> @foreach (var categoria in ViewBag.Categorias) { <option value="@categoria.Id"> @categoria.Nome </option> } </select> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> <div class="mt-2 container row"> <div id="gallery-container" class="row row-cols-1 row-cols-md-5 g-4 mx-auto"> @{ int id = 1; if (Model.Imagens.Where(img => !img.Perfil).Count() == 0) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> </div> <div class=""> <img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="..."> </div> <div class="card-body p-0"> <hr id="line-@id" /> <div class=""> <div class="input-group justify-content-center"> <label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagens" type="file" class="form-control input-gallery" id="input-@id"> </div> </div> </div> </div> } foreach (var imagem in Model.Imagens.Where(img => !img.Perfil)) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> <a id="btn-@id" data-img-id="@imagem.Id" class="btn btn-close p-3"></a> </div> <div class=""> <img id="img-@id" src="~/images/@(imagem.NomeArquivo + "." + imagem.Extensao)" class="img-gallery card-img mb-2" alt="..."> </div> </div> ++id; if (id == Model.Imagens.Where(img => !img.Perfil).Count() + 1) { <div class="card mx-3" id="card-@id"> <div id="header-@id" class="row justify-content-end"> </div> <div class=""> <img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="..."> </div> <div class="card-body p-0"> <hr id="line-@id" /> <div class=""> <div class="input-group justify-content-center"> <label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id"> <i class="bi bi-upload mx-2"></i> Upload </label> <input name="imagens" type="file" class="form-control input-gallery" id="input-@id"> </div> </div> </div> </div> } } } </div> </div> </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> <input class="form-control" id="input-text-produto"/> <div id="card-produto-container"> </div> </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div> </div> </div> <button type="submit" class="btn btn-success float" id="save-button"> <i class="bi bi-floppy"></i></button> <div class="fixed-bottom row d-flex justify-content-end"> </div> </form> @section Scripts { <script> $(document).ready(function () { $('#inputGroupFile01').change(function () { var input = this; //console.log(input) if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#img-profile').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }); let idStart = @Model.Imagens.Count() == 0 ? 1 : @Model.Imagens.Count() let args = { input: 'input-'+idStart, img: 'img-'+idStart, card: 'card-'+idStart, header: 'header-'+idStart, label: 'label-'+idStart, line: 'line-'+idStart } function initGallery(args) { setEvents(args) } function setCloseEvents(idLimit) { for (let i = 1; i <= idLimit; ++i) { let btn = $('#btn-' + i) btn.click(function () { let card = $('#card-'+i) console.log(i) imgId = btn.data('img-id') $('#gallery-container').append(`<input hidden name="imgsDeletadas" value="${imgId}"/>`) card.remove() }) } } function setCloseEventProfile() { let btn = $('#btn-profile').click(function () { let img = $('#img-profile').attr('src', '/images/img-icon.png') let imgId = btn.data('img-id') var headerProfile = $('#header-profile') let inputContainer = $('#input-container') inputContainer.show() headerProfile.hide() $('#gallery-container').append(`<input hidden name ="imgsDeletadas" value ="${imgId}" />`) }) } $('#input-text-produto').on('input', function (event) { let cardParameters = { resultsQtd : 3, searchValue : "" } $.post('/Produto/LoadCards', cardParameters) .done(function (result) { console.log(result) $('#card-produto-container').html(result) }) }) let limit = idStart - 1 setCloseEvents(limit) setCloseEventProfile() initGallery(args) }) </script> } 我的问题是:当我调用以下ajax请求并将结果加载到div中时(如果我只在控制台中打印内容,则不会发生任何错误),我的控制器中的方法Edit被调用,ID为0,该方法不存在,并返回错误,因为控制器在 db 中找不到 0 id。 $('#input-text-produto').on('input', function (event) { let cardParameters = { resultsQtd : 3, searchValue : "" } $.post('/Produto/LoadCards', cardParameters) .done(function (result) { console.log(result) $('#card-produto-container').html(result) }) 这是我的部分视图: @model CardResponse<ProdutoViewModel> <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> @foreach(var produto in Model.Result) { <div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">@produto.Nome</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> } </div> </div> 这是我的控制器: using Microsoft.AspNetCore.Mvc; using kssgrafica.Data; using kssgrafica.Models; using kssgrafica.Models.ViewModels; using ImageMagick; using kssgrafica.Services; using kssgrafica.Services.ImageHandler; using kssgrafica.Services.ImageHandler.Dtos; using Microsoft.EntityFrameworkCore; using AutoMapper; using kssgrafica.Models.AuxiliaryModels; using kssgrafica.Extensions; namespace kssgrafica.Controllers { public class ProdutoController(ApplicationDbContext context, IImageHandler _imageHandler, IMapper mapper) : Controller { private readonly ApplicationDbContext _context = context; private readonly IMapper _mapper = mapper; private string DefaultPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images"); public IActionResult Index() { var produtos = _context.Produtos.Include(p => p.Categoria).Include(p => p.Imagens).ToList(); var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos); return View(produtosViewModel); } public async Task<IActionResult> LoadTable(DtParameters dtParameters) { var searchBy = dtParameters.Search?.Value; // if we have an empty search then just order the results by Id ascending var orderCriteria = "Id"; var orderAscendingDirection = true; if (dtParameters.Order != null) { // in this example we just default sort on the 1st column orderCriteria = dtParameters.Columns[dtParameters.Order[0].Column].Data; orderAscendingDirection = dtParameters.Order[0].Dir.ToString().ToLower() == "asc"; } var produtos = await _context.Produtos.ToListAsync(); var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos); var result = produtosViewModel.AsQueryable(); if (!string.IsNullOrEmpty(searchBy)) { result = result.Where(r => r.Nome != null && r.Nome.ToUpper().Contains(searchBy.ToUpper()) || r.Descricao != null && r.Descricao.ToUpper().Contains(searchBy.ToUpper()) || r.Preco != null && r.Preco.ToString().ToUpper().Contains(searchBy.ToUpper()) || r.Id != null && r.Id.ToString() == searchBy.ToUpper()); } result = orderAscendingDirection ? result.OrderByDynamic(orderCriteria, DtOrderDir.Asc) : result.OrderByDynamic(orderCriteria, DtOrderDir.Desc); // now just get the count of items (without the skip and take) - eg how many could be returned with filtering var filteredResultsCount = result.Count(); var totalResultsCount = await _context.Produtos.CountAsync(); return Json(new DtResult<ProdutoViewModel> { Draw = dtParameters.Draw, RecordsTotal = totalResultsCount, RecordsFiltered = filteredResultsCount, Data = result .Skip(dtParameters.Start) .Take(dtParameters.Length) .ToList() }); } public IActionResult Create() { ViewBag.Categorias = _context.CategoriasProduto.ToList(); return View(); } [HttpPost] public async Task<IActionResult> Create(ProdutoViewModel produtoViewModel, List<IFormFile> imagens, IFormFile imagemPerfil) { produtoViewModel.DataCadastro = DateTime.UtcNow; var produto = _mapper.Map<Produto>(produtoViewModel); _context.Add(produto); await _context.SaveChangesAsync(); await SalvarImagens(imagens, imagemPerfil, produto); return RedirectToAction(nameof(Index)); } [HttpGet] public async Task<IActionResult> Edit(int id) { ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } [HttpPost] public async Task<IActionResult> Edit(ProdutoViewModel produtoViewModel, int[] imgsDeletadas, List<IFormFile> imagens, IFormFile imagemPerfil) { var produto = _mapper.Map<Produto>(produtoViewModel); _context.Update(produto); await DeleteImages(imgsDeletadas); await SalvarImagens(imagens, imagemPerfil, produto); await _context.SaveChangesAsync(); return RedirectToAction(nameof(Index)); } [HttpPost] public async Task<IActionResult> LoadCards(CardParameters cardParameters) { var produtos = await _context.Produtos.Include(p => p.Imagens).ToListAsync(); var result = _mapper.Map<List<ProdutoViewModel>>(produtos); if (!string.IsNullOrEmpty(cardParameters.SearchValue)) { result = result.Where(p => p.Id.ToString().ToUpper() == cardParameters.SearchValue.ToUpper() || p.Nome != null && p.Nome.ToUpper().Contains(cardParameters.SearchValue.ToUpper()) || p.Descricao != null && p.Descricao.ToUpper().Contains(cardParameters.SearchValue.ToUpper())).ToList(); } var response = new CardResponse<ProdutoViewModel>() { Result = result.Take(cardParameters.ResultsQtd).ToList(), LengthTotalRegisters = await _context.Produtos.CountAsync(), LengthFiltredResults = result.Count() }; return PartialView("Cards",response); } private async Task SalvarImagens(List<IFormFile> imagensGaleriaArquivo, IFormFile imagemPerfilArquivo, Produto produto) { foreach(var arquivo in imagensGaleriaArquivo) { var imagemGaleria = new Imagem() { Nome = "", NomeArquivo = Guid.NewGuid().ToString(), File = arquivo, Extensao = _imageHandler.GetExtension(arquivo), IdProduto = produto.Id, Path = DefaultPath, Perfil = false }; var dtoGaleria = imagemGaleria.ToImageDto(); if(await _imageHandler.SaveImageAsync(dtoGaleria)) { try { _context.Add(imagemGaleria); } catch(Exception ex) { Console.WriteLine(ex.Message); _imageHandler.DeleteImage(dtoGaleria); } } } if(imagemPerfilArquivo != null) { var imagemPerfil = new Imagem() { Nome = "", NomeArquivo = Guid.NewGuid().ToString(), File = imagemPerfilArquivo, Extensao = _imageHandler.GetExtension(imagemPerfilArquivo), IdProduto = produto.Id, Path = DefaultPath, Perfil = true }; var dtoPerfil = imagemPerfil.ToImageDto(); try { if(await _imageHandler.SaveImageAsync(dtoPerfil)) { _context.Add(imagemPerfil); } } catch(Exception ex) { Console.WriteLine(ex.Message); _imageHandler.DeleteImage(dtoPerfil); } } await _context.SaveChangesAsync(); } private async Task DeleteImages(int[] imagesIds) { if(imagesIds.Length > 0) { var imagesIdsList = imagesIds.ToList(); var images = await _context.Imagens.Where(img => imagesIdsList.Contains(img.Id)).ToListAsync(); foreach(var img in images) { img.Path = DefaultPath; _imageHandler.DeleteImage(img.ToImageDto()); _context.Remove(img); } await _context.SaveChangesAsync(); } } } } 问题涉及到的方法有Edit、post and get、LoadCards。 我不知道为什么在加载 PartialView 时调用 Edit(get 方法),但我放置了一个 if 来处理 id 为 0 时的情况,返回 Ok(),但我想知道为什么会发生这种情况. 这是我的尝试: public async Task<IActionResult> Edit(int id) { if(id == 0) { return Ok(); } ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } 由于未指定任何值,因此参数 id 将获取默认值为零的整数。尝试使用可空整数int?。我还没有测试过它,但我相信你的 lambda 中还需要 id.Value,因为我假设 p.Id 是 int。 public async Task<IActionResult> Edit(int? id) { if(id.HasValue) { ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync(); var produto = await _context.Produtos.Where(p => p.Id == id.Value).Include(p => p.Imagens).FirstOrDefaultAsync(); var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto); return View(produtoViewModel); } else { return Ok(); } }

回答 1 投票 0

将数据发送到从视图调用的PartialView

在视图中,我像这样调用部分视图。 @foreach(Model.OrderBy(x => x.VariantName)中的var项目) { } 问题...

回答 1 投票 0

rails render_to_string 在部分视图中给出错误

在代码下方使用带有部分视图的 render_to_string 方法时,出现 ActionView::MissingTemplate 错误 bizz = render_to_string(:partial => "biz_new",:layout => false) 即使...

回答 5 投票 0

如果模型状态无效,则返回部分视图

我有一个带有注册表单的滑块,我将表单创建为部分 View 。 这是创建注册表单的方法: 获取方法: 公共 IActionResult CorporationRegisterReque...

回答 1 投票 0

如何在 ASP.NET Core Razor Pages 项目中使用实体框架作为 _layout.cshtml 文件中的分部视图来使用 Razor Page?

在 ASP.NET Core Razor Pages 项目中,我想从数据库中获取员工姓名并将其显示为侧边栏菜单中的菜单项。侧边栏菜单位于 _layout.cshtml 文件中。 我使用...添加 Razor 页面

回答 2 投票 0

在 ASP.NET MVC 中将模型数据绑定到表单

如何预先填充模型的数据以形成我正在模型中获取数据,我可以在 Quickwatch 中看到,但它没有填充到表单中。 这是我的模型和观点。我也在从这个模型发送数据...

回答 1 投票 0

一页内有多个局部视图。传递模型和调用操作

我是一名学生,刚接触 ASP.NET Core MVC 我正在尝试创建一个预订系统,并希望通过使用某种手风琴将所有步骤都放在一页上。 我正在努力...

回答 2 投票 0

如何在 MVC 应用程序中引用下拉列表

请帮忙,我正在尝试引用我在控制器中编码的下拉菜单并使用 viewBag 将其获取到视图中,但现在我需要在 JQuery 函数中引用视图, **控制器.cs** ...

回答 1 投票 0

在 razor foreach 上获取索引值

我正在视图中的 razor foreach 循环中迭代 List,这会呈现部分内容。在部分中,我正在渲染一条记录,我希望在视图中连续显示 4 条记录。我有一个 css c...

回答 12 投票 0

仅在 IIS 中使用 ASP.NET Core 时未找到部分视图异常

迁移到 .net 5 后,我们遇到了部分视图问题。主页将选择性地呈现自定义部分视图以允许每个客户进行自定义。迁移后我们无法

回答 2 投票 0

你能从 Rails 部分中获取该部分的名称吗?

是否有一个变量包含可从部分内部访问的部分名称? 渲染部分:'foo' 在 _foo.haml 中: 。姓名 =partial_name#将输出“foo”

回答 3 投票 0

从传递给分部视图的嵌套复杂对象中获取值

我有一个 ViewModel,它的成员之一是一个复杂的对象。复杂对象有 4 个属性(都是字符串)。我正在尝试创建一个可重用的部分视图,我可以在其中传递复杂的

回答 5 投票 0

将模型数据传递到局部视图

当我创建部分视图,并且我想获取一些模型数据时,我收到此错误: 部分视图文件位于 Pages/Shared 文件夹中 该错误表明名称 Model 在当前中不存在

回答 1 投票 0

执行处理程序的子请求时出错 - 从控制器调用的部分视图

我的家庭控制器中有一个方法可以返回部分视图,但是当我运行我的应用程序时,我收到错误。 执行处理程序“System.Web.Mvc.HttpHandlerUtil+

回答 2 投票 0

使用 Ajax 更新非 MVC Asp.Net Core 6 RazorPages 上的部分视图

我正在使用 RazorPages(无 MVC)开发 ASP.Net Core 6 Web 应用程序。 RazorPage 包含一个部分视图,我想在模型更新后更新它。模型更新已成功完成

回答 1 投票 0

用它自己的 angularjs 控制器文件在 asp.net mvc 中显示局部视图

我有一个 asp.net mvc 和 angularjs 项目,我想在模式中加载局部视图, 我想让每个局部视图都有自己的 angularjs 控制器及其脚本。 我的部分观点是这样的

回答 0 投票 0

在 ASP.NET Core 7 Razor Pages 中没有完整页面回发的部分表单保存和加载?

ASP.NET 核心 7 实体框架 部署在 Azure 上(应用服务和 SQL Server) 我在一个页面上有三个文本框。文本框可以包含大量文本。用户将与cl讨论...

回答 1 投票 0

在 ASP.NET 7 Razor Pages 中没有整页回发的部分表单保存和加载?

ASP.NET 核心 7 实体框架 部署在 Azure 上(应用服务和 SQL Server) 我在一个页面上有三个文本框。文本框可以包含大量文本。用户将与cl讨论...

回答 0 投票 0

Dotnet 应用程序中的部分视图未出现

我在 dotnet 应用程序中遇到部分视图问题 我一直在关注 Adam Freeman(Apress)的 Pro ASP.NET Core Identity 书 布局文件看起来像我打电话的下图

回答 0 投票 0

如何从部分选择列表中更新模型的值

IndexModel 是我的主页,我从 _statusService 获取一些数据,这些数据在部分 _MyPartial 中呈现 我遇到的问题是,在那个部分我有一个选择列表,我想得到

回答 0 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.