ASP.NET MVC5中如何动态修改ViewBag.Title的文本内容？

First off, let's clarify a key point: ViewBag.Title is a server-side object—once your page renders, it gets converted into the <title> tag in your HTML. You can't modify the ViewBag itself from the frontend, but you can update the browser's page title (what users see in the tab) using JavaScript.

Here are two straightforward approaches to implement this:

Approach 1: Pass Service-Specific Titles from the Backend #

If you want custom, tailored titles for each service type, send a mapping of service values to titles from your controller, then use that in your frontend code.

Step 1: Add the Title Mapping in Your Controller #

In your action method, alongside your ServiceList, add a dictionary linking each service type value to its corresponding title:

// Existing service list code
ViewBag.ServiceList = new List<SelectListItem>
{
    new SelectListItem { Value = "webdev", Text = "Web Development" },
    new SelectListItem { Value = "design", Text = "Graphic Design" },
    new SelectListItem { Value = "writing", Text = "Content Writing" }
};

// New: Service-to-title mapping
ViewBag.ServiceTitles = new Dictionary<string, string>
{
    {"webdev", "Hire top web development freelancers online, find the right web dev freelance workers with ease"},
    {"design", "Find professional graphic design freelancers online, hire the perfect design expert effortlessly"},
    {"writing", "Hire skilled content writing freelancers online, find the right copywriter for your project"}
};

Step 2: Update the Frontend JavaScript #

Modify your serviceTypeChange function to fetch the matching title and update the page title:

function serviceTypeChange(element, isTrue) {
    // Keep your existing logic here (if any)
    
    // Get the selected service value
    const selectedValue = element.value;
    
    // Convert the server-side title mapping to a JS object
    const serviceTitles = @Html.Raw(Json.Serialize(ViewBag.ServiceTitles));
    
    // Update the page title, or fall back to the original if no match exists
    if (serviceTitles[selectedValue]) {
        document.title = serviceTitles[selectedValue];
    } else {
        document.title = "@ViewBag.Title";
    }
}

Approach 2: Dynamically Generate the Title from Selected Text #

If your titles follow a consistent pattern, you can dynamically insert the selected service's text into a base template. This is simpler for standardized titles.

Update the serviceTypeChange Function #

function serviceTypeChange(element, isTrue) {
    // Keep your existing logic here (if any)
    
    // Get the visible text of the selected option
    const selectedText = element.options[element.selectedIndex].text;
    
    // Use a template to build the dynamic title
    const baseTemplate = "Find and hire {service} freelancers online, find the right {service} freelance workers with ease and hire a {service} freelancer online";
    
    // Replace the placeholder with the selected service text
    const newTitle = baseTemplate.replace(/{service}/g, selectedText);
    
    // Update the browser's page title
    document.title = newTitle;
}

Quick Check #

Make sure your layout's <title> tag uses the ViewBag.Title value, like this:

<title>@ViewBag.Title</title>

If your dropdown has an empty default option, add a check to revert to the original title when that option is selected.

内容的提问来源于stack exchange，提问作者Raghuram Nandan