.net项目，视图用的razor，我想实现一个文件的上传功能，不用type=file标签！

Posted 2023-05-12

我想用这种方式：
在asp页面，有一个添加文件的超链接，点击用js弹出文件选择的对话框，选择文件后，再在后台进行文件大小，文件格式的校验，最后再上传！！！
请高手指教！！！！

参考技术A 首先，你的功能肯定不是一个Input标签可以解决的（html5 我不了解，但HTML4肯定不可能）
需要js和后台代码配合（可能httpmodule或httphandler来处理，建议httphandler处理），下面就要分清哪部分是js哪部分需要后台代码，我的理解对话框/选中文件/提交后台 都是由js+html+css辅助操作；具体的上传放在后台。有了模块，下面就是码农的堆代码了，具体的开发并行还是怎么就根据自己的喜好了，建议是先写后台，验证后台上传功能（好的测试用例是可以很轻松的转开发前台）；再写前台（如果你之前验证后台上传功能的用例写的很棒，这里的代码量会很轻松 主要是一个优化）。本回答被提问者采纳

在 Razor 视图中使用 Ajax 进行 Asp.Net Core 表分页

【中文标题】在 Razor 视图中使用 Ajax 进行 Asp.Net Core 表分页

【英文标题】：Asp.Net Core Table Paging With Ajax in Razor View

【发布时间】：2019-05-22 22:21:55

【问题描述】：

我在 asp.net core razor 页面中有一个带有分页的 HTML5 表格。但通过单击下一页或上一页刷新整个页面。我想使用ajax在表格中实现分页。 我如何实现ajax分页？？？

  @foreach (var user in Model.UserManageViewModel.User)
            

                <tr>                        
                    <td>@string.Format("0 1", user.Name, user.LastName)</td>
                    <td>@user.NationalCode</td>
                    <td>@user.Mobile</td>
                    <td>@user.Email</td>
                    <td>@user.RegisterDate.ToShamsi()</td>
                    <td class="@((@user.IsActive)?"text-success":"text-danger")">@((user.IsActive) ? "فعال" : "غیرفعال")</td>
                    <td>@user.UserRoles</td>
                </tr>
            

  <a href="/Admin/users?pageId=@Model.UserManageViewModel.CurrentPage + 1)>next</a>

我的代码是：

public class IndexModel : PageModel

    private IUserService _userService;

    public IndexModel(IUserService userService)
    
        _userService = userService;
    

    public TableViewModel<User> UserManageViewModel  get; set; 

    public async Task OnGetAsync(int pageId=1,int maxRows=10)
    
            UserManageViewModel =await _userService.GetUserList(pageId, maxRows);
    

【问题讨论】：

您可以使用异步局部视图并在局部视图中显示您的表格。所以，只有那部分会在回发时刷新

但是使用标签进行分页没有刷新所有页面？？？

【参考方案1】：

您可以使用 jquery 并像这样实现它：

<div id="users">
    @foreach (var user in Model.UserManageViewModel.User)
    ...
</div>

<a href="#">next</a>

$().ready(function()
   $("a").click(function()
      $.ajax(
         type: "POST",
         url: '@Url.Action("Users", "Admin",pageId=@Model.UserManageViewModel.CurrentPage + 1)',
         contentType: "application/json",
         dataType: "html",
         success: function (response) 
            $('#users').html(response);
         ,
         failure: function (response) 
            alert(response.responseText);
         ,
         error: function (response) 
           alert(response.responseText);
         
      );
   );
)

【讨论】：

我不能使用这个，因为我有一个包含用户列表和 pagenum 的类，......并且 json 不会发送所有这些。

【参考方案2】：

您可以创建一个以 json 格式返回数据的 api，然后使用 javascript 动态创建表。

像这样创建一个控制器：

[Route("[controller]/[action]")]
public class ApiController : Controller

    private readonly IUserService _userService;

    public ApiController(IUserService userService)
    
        _userService = userService;
    

    [HttpGet]
    public async Task<JsonResult> GetUsers(int pageId = 1, int maxRows = 10)
    
        var tableVm = await _userService.GetUserList(pageId, maxRows); //TableViewModel<User>

        return Json(tableVm);
    

然后在按下下一个或上一个按钮时在您的脚本中：

$.getJSON("/api/getstudents", 
    pageId: currentPage + 1, //the pageId you want to retrieve
    maxRows: 10              //how many rows you want to retrieve
).done(function(data) 
    console.log(data);
    //data.currentPage has the new page index
    //data.user is an array of 10 Users

    currentPage = data.currentPage;

    //create the table however you like
    $.each(data.user, function(key, value) 
        $("table").append("<tr><td>" + value.lastName + "</td></tr>");
    );
);

或

您可以创建一个名为 _Users.cshtml 的局部视图：

@model TableViewModel<User>

<table class="table table-striped">
    @foreach(var user in Model.User)
    
        <tr>                        
            <td>@string.Format("0 1", user.Name, user.LastName)</td>
            <td>@user.NationalCode</td>
            <td>@user.Mobile</td>
            <td>@user.Email</td>
            <td>@user.RegisterDate.ToShamsi()</td>
            <td class="@((@user.IsActive)?"text-success":"text-danger")">@((user.IsActive) ? "فعال" : "غیرفعال")</td>
            <td>@user.UserRoles</td>
        </tr>
    
</table>

然后向您的 IndexModel 添加一个新的处理程序：

public async Task<PartialViewResult> OnGetUsersPartial(int pageId = 1, int maxRows = 10)

    var tableVm = await _userService.GetUserList(pageId, maxRows);

    return new PartialViewResult
    
        ViewName = "_Users",
        ViewData = new ViewDataDictionary<List<User>>(ViewData, tableVm)
    ;

您的 OnGetAsync() 中不需要任何内容​​，也不再需要 UserManageViewModel 属性。

最后在您的索引视图中添加：

<table id="table"></table>
<a id="next">Next</a>

@section Scripts

    <script>
        $(function() 
            var pageId = 1;

            var loadTable = function(pageId) 
                $('#table').load('/Index?handler=UsersPartial&pageId=' + pageId + '&maxRows=10');
            

            loadTable(pageId);

            $('#next').on('click', function() 
                loadTable(pageId++);
            );
        );
    </script>