基于ASP.NET(C#)在VS2017中实现响应式用户输入模块的咨询

Hey there! Let's break down how to build that responsive input interface for your university web app using Visual Studio 2017, ASP.NET, and C#. Here's a step-by-step approach tailored to your needs:

Since you're aiming for a responsive layout, using Bootstrap (included by default in most ASP.NET Web Forms/MVC projects in VS 2017) is the easiest way to ensure your input boxes adapt to different screen sizes. Here’s a sample Razor view snippet:

@model YourAppName.ViewModels.CampusInputViewModel

<div class="container mt-4">
    <form asp-action="SubmitCampusInput" method="post">
        <div class="row">
            <!-- First Input: Campus-Related Question -->
            <div class="col-md-4 col-sm-12 mb-3">
                <label asp-for="CampusQuestion" class="form-label">Campus-Related Question</label>
                <input asp-for="CampusQuestion" class="form-control" placeholder="e.g., 'How do I access the downtown campus library?'" />
                <span asp-validation-for="CampusQuestion" class="text-danger"></span>
            </div>

            <!-- Second Input -->
            <div class="col-md-4 col-sm-12 mb-3">
                <label asp-for="SecondInput" class="form-label">Second Input</label>
                <input asp-for="SecondInput" class="form-control" placeholder="Enter your input here" />
                <span asp-validation-for="SecondInput" class="text-danger"></span>
            </div>

            <!-- Third Input -->
            <div class="col-md-4 col-sm-12 mb-3">
                <label asp-for="ThirdInput" class="form-label">Third Input</label>
                <input asp-for="ThirdInput" class="form-control" placeholder="Enter your input here" />
                <span asp-validation-for="ThirdInput" class="text-danger"></span>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

The col-md-4 col-sm-12 classes ensure that on medium/large screens, the inputs sit side-by-side (3 per row), while on small screens (mobile), they stack vertically. The mb-3 class adds margin between each input for better spacing.

To handle input data server-side, create a ViewModel class in your project’s ViewModels folder (create the folder if it doesn’t exist):

using System.ComponentModel.DataAnnotations;

namespace YourAppName.ViewModels
{
    public class CampusInputViewModel
    {
        [Required(ErrorMessage = "Please enter your campus-related question")]
        [Display(Name = "Campus-Related Question")]
        public string CampusQuestion { get; set; }

        // Add validation rules for the other inputs as needed
        public string SecondInput { get; set; }
        public string ThirdInput { get; set; }
    }
}

Add action methods to your controller to display the form and process submissions:

using Microsoft.AspNetCore.Mvc;
using YourAppName.ViewModels;

namespace YourAppName.Controllers
{
    public class CampusController : Controller
    {
        // Display the input form
        public IActionResult Index()
        {
            return View();
        }

        // Handle form submission
        [HttpPost]
        public IActionResult SubmitCampusInput(CampusInputViewModel model)
        {
            if (ModelState.IsValid)
            {
                // Process the input data here (e.g., save to database, send to a service)
                // For example: _campusService.SaveQuestion(model.CampusQuestion);

                TempData["SuccessMessage"] = "Your input has been submitted successfully!";
                return RedirectToAction("Index");
            }

            // If validation fails, return the view with error messages
            return View("Index", model);
        }
    }
}

If you want to tweak the layout beyond Bootstrap’s defaults, add custom CSS to your site’s stylesheet (e.g., site.css):

/* Adjust input padding for mobile */
@media (max-width: 576px) {
    .form-control {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

/* Add subtle shadow to input boxes on focus */
.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: #86b7fe;
}

Quick Tips #

• Validation: The [Required] attribute triggers both client-side (if jQuery Validation is included, which it is by default in VS 2017 ASP.NET templates) and server-side validation.
• Accessibility: Always include label elements for each input to make the interface accessible to screen readers.
• Testing: Use Visual Studio 2017’s built-in browser tools (F12) to test the responsive layout on different screen sizes.

Hope this gets you up and running smoothly! Let me know if you need help with any specific part like database integration or more advanced validation.

内容的提问来源于stack exchange，提问作者Chester S.